nextjs渲染篇

在Next.js中，可以通过两种主要方式来实现服务端渲染（SSR）：

1. 使用getServerSideProps：这是一个静态组件的方法，它在每次请求时运行服务器端代码来获取数据。

// pages/index.js
export default function Home({ data }) {
  // 使用SSR获取的数据
  return <div>Hello, {data.name}!</div>;
}
 
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
 
  // 将数据传递到页面属性
  return { props: { data } };
}

2. 使用getStaticProps：如果内容更新不频繁，可以预渲染静态页面。

// pages/index.js
export default function Home({ data }) {
  // 使用SSG预渲染的数据
  return <div>Hello, {data.name}!</div>;
}
 
export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
 
  // 将数据传递到页面属性，并指定预渲染的时间
  return { props: { data }, revalidate: 60 }; // 60秒后重新验证
}

getStaticProps和getServerSideProps都可以用于获取数据，但getStaticProps会生成静态页面，在需要时进行预渲染，而getServerSideProps则在每次请求时动态获取数据。根据你的具体需求选择合适的方法。