什么是 SSR
SSR（Server Side Rendering）指的是在服务器端将页面渲染成 HTML，然后再将 HTML 发送到客户端，客户端只需要展示这个 HTML 即可。这样做的好处是可以加快首屏渲染速度，提高 SEO（Search Engine Optimization）优化，因为搜索引擎更加容易爬取到渲染好的 HTML。
Next.js 是什么
Next.js 是一个基于 React 的 SSR 框架，它可以帮助我们快速搭建 SSR 应用。它提供了许多 SSR 相关的功能，如服务端渲染、静态文件生成、代码分割等。
如何实现 SSR
安装 Next.js
npm install next react react-dom
创建 Next.js 应用
在命令行中执行以下命令：
npx create-next-app my-app
这个命令会创建一个名为 my-app 的 Next.js 应用。
编写页面
在 pages 目录下创建一个名为 index.js 的文件，代码如下：
-- -------------------- ---- -------
-------- ----------- -
------ -
-----
---------- ------------------
------
--
-
-------------------- - ----- -- -- -
------ - ----- --------- --
--
------ ------- -----这个页面中，我们定义了一个 Home 组件，它接收一个 props.name 属性，然后在页面中展示出来。在 Home 组件中，我们还定义了一个静态方法 getInitialProps，这个方法会在页面渲染之前被调用，它可以在服务端获取数据，并将数据传递给组件。
启动应用
在命令行中执行以下命令：
npm run dev
这个命令会启动开发服务器，并在浏览器中打开应用。
构建应用
在命令行中执行以下命令：
npm run build
这个命令会将应用构建成静态文件。
总结
Next.js 是一个非常好用的 SSR 框架，它可以帮助我们快速搭建 SSR 应用，加快首屏渲染速度，提高 SEO 优化。在使用 Next.js 进行开发时，我们需要注意一些 SSR 相关的知识点，如 getInitialProps 方法的使用等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658f2c9feb4cecbf2d4dff53