服务器端渲染（Server Side Rendering, SSR）是现代前端框架中的一种重要技术。它允许在服务器上生成完整的 HTML 文档，并将其发送到客户端，从而提高了首屏加载速度和搜索引擎优化（SEO）。Next.js 是一个流行的 React 框架，内置了对 SSR 的支持，使得开发者能够轻松实现这一功能。
启用 SSR
默认启用 SSR
在 Next.js 中，SSR 是默认开启的。这意味着，当你创建一个新的页面时，该页面将自动采用 SSR 模式。例如，如果你在 pages 文件夹下创建了一个名为 index.js 的文件，那么这个页面将默认使用 SSR 渲染。
// pages/index.js
export default function Home() {
return <div>Hello World</div>;
}在这个例子中，Home 组件将被服务器渲染为完整的 HTML 字符串，然后发送给客户端。
手动启用 SSR
尽管 SSR 在 Next.js 中是默认启用的，但有时你可能需要手动控制某些组件或页面的渲染模式。为了手动启用 SSR，你可以使用 getInitialProps 方法或者更现代的 getServerSideProps 方法。
使用 getInitialProps
getInitialProps 是一个生命周期方法，可以让你在页面加载之前获取数据。这种方法主要用于从外部 API 获取数据并将其传递给页面。
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ ------- -------- ----------- -
------ -
-----
----------------------
----------------------
------
--
-
-------------------- - ----- -- -- -
----- -------- - ----- ------------------------------------------
------ -
------ --------------------
-------- ----------------------
--
--在这个例子中，getInitialProps 方法会在页面加载之前调用，从 API 获取数据并将其作为属性传递给 Home 组件。
使用 getServerSideProps
getServerSideProps 是一个更现代的方法，用于在每次请求时从服务器获取数据。与 getInitialProps 不同的是，getServerSideProps 只能在页面级别使用，并且它返回的数据会被自动注入到页面组件的 props 中。
-- -------------------- ---- -------
-- --------------
------ ------- -------- ------ ------ ------- -- -
------ -
-----
----------------
----------------
------
--
-
------ ----- -------- -------------------- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -
------ -
------ -----------
-------- -------------
--
--
-在这个例子中，getServerSideProps 方法会在每次请求时执行，并将获取到的数据作为 props 传递给 Home 组件。
静态站点生成（SSG）
除了 SSR，Next.js 还支持静态站点生成（Static Site Generation, SSG），这是一种预渲染所有页面的技术。虽然 SSG 和 SSR 都涉及服务器端的操作，但它们的工作方式不同。
使用 getStaticProps
getStaticProps 是一种用于 SSG 的方法，它允许你在构建时预渲染页面。这使得你的应用可以在部署时生成静态 HTML 文件，从而提高性能。
-- -------------------- ---- -------
-- --------------
------ ------- -------- ------ ------ ------- -- -
------ -
-----
----------------
----------------
------
--
-
------ ----- -------- ---------------- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -
------ -
------ -----------
-------- -------------
--
--
-在这个例子中，getStaticProps 方法会在构建时执行，并将获取到的数据作为 props 传递给 Home 组件。这些数据会被用来生成静态 HTML 文件，从而实现快速加载。
总结
Next.js 提供了多种方法来实现 SSR 和 SSG，使得开发者可以根据具体需求选择最合适的技术。通过使用 getInitialProps、getServerSideProps 或 getStaticProps，你可以灵活地控制页面的渲染方式，从而优化应用的性能和用户体验。