Next.js 的三种渲染方式（BSR、SSG、SSR）

活得明白最幸福 發表於 2025-9-3 15:41:00

Next.js 的三种渲染方式（BSR、SSG、SSR）

<h1 class="Post-Title"> </h1>
<div class="Post-Author">
<div class="AuthorInfo">
<div class="AuthorInfo">
<div class="css-1gomreu"><img src="https://picx.zhimg.com/v2-0c378fd4c43666d7672cbf7b676fb1a9_l.jpg?source=32738c0c&needBackground=1" srcset="https://picx.zhimg.com/v2-0c378fd4c43666d7672cbf7b676fb1a9_l.jpg?source=32738c0c&needBackground=1 2x" alt="Jacky" class="Avatar AuthorInfo-avatar css-1syywx2"></div>
<div class="AuthorInfo-content">
<div class="AuthorInfo-head">
<div class="css-1gomreu">Jacky</div>
</div>
<div class="AuthorInfo-detail">
<div class="AuthorInfo-badge">
<div class="ztext AuthorInfo-badgeText css-0">一名奋飞的前端小菜鸟</div>
</div>
</div>
</div>
</div>
</div>
<button class="Button FollowButton FEfUrdfMIKpQDJDqkjte Button--primary Button--blue epMJl0lFQuYbC7jrwr_o JmYzaky7MEPMFcJDLNMG" type="button">关注他</button></div>
<div>
<div class="css-dvccr2">
<div class="css-1lr85n">55 人赞同了该文章</div>
</div>
</div>
<div class="Post-RichTextContainer">
<div class="css-1od93p9">
<div class="css-376mun">
<div class="RichText ztext Post-RichText css-oqi8p3">
Next.js 是一个轻量级的 React 服务端渲染框架
它支持三种渲染方式包括
<ul>
<li data-pid="dtvy_Iod">客户端渲染 BSR (Broswer Side Render)</li>
<li data-pid="TACUX63y">静态页面生成 SSG (Static Site Generation)</li>
<li data-pid="HWtHCVsO">服务端渲染 SSR (Server Side Render)</li>
</ul>
<h2>旧瓶装新酒</h2>
上面说的几种渲染方式，其实并非什么新东西，其实可以和这些技术对应起来
<ul>
<li data-pid="v9WOTJsk">BSR -- 用 JS、Vue、React 创建 HTML</li>
<li data-pid="T-4lEgYB">SSG -- 页面静态化，把 PHP 提前渲染成 HTML</li>
<li data-pid="J8bNicYu">SSR -- PHP、Python、Ruby、Java 后台的基本功能</li>
</ul>
<h2>不同点</h2>
Next.js 的预渲染可以与前端 React 无缝对接
<hr>
下面，以一个文章列表页面作为例子，分别解析一下三种渲染方式吧
<h2>客户端渲染</h2>
客户端渲染，顾名思义就是只在浏览器上执行的渲染，通过Vue 和 React 构建的单页面应用SPA 都是采用这种方式渲染
<h3>缺点</h3>
1 .白屏，在 AJAX 得到渲染之前，页面中并没有内容，只能通过 Loading 来过度
2. SEO 不友好，因为搜索引擎访问页面，默认不会执行 JS，只能看到 HTML，而不会等待 AJAX 异步请求数据，所以搜索不到页面内容
代码
<div class="highlight">
<pre><code class="language-js">import {NextPage} from 'next';
import axios from 'axios';
import {useEffect, useState} from "react";
import * as React from "react";

type Post = {
id: string,
id: string,
title: string
}
const PostsIndex: NextPage = () => {
// [] 表示只在第一次渲染的时候请求
 const [posts, setPosts] = useState<Post[]>([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
 setIsLoading(true);
 // 使用 AJAX 异步请求数据
 axios.get('/api/posts').then(response => {
 setPosts(response.data);
 setIsLoading(false);
 }, () => {
 setIsLoading(true);
 })
}, []);
return (
 <div>
 <h1>文章列表</h1>
 {isLoading ? <div>加载中</div> :
 posts.map(p => <div key={p.id}>
 {p.id}
 </div>)}
 </div>
)
};

export default PostsIndex;
</code></pre>
</div>
当网络不好的时候，loading 的时间很长，页面肯能会出现长时间白屏
由于初次请求的 HTML 中并没有文章内容，需要通过 AJAX 异步加载数据，而这个加载数据渲染的过程都是在客户端完成的，所以称为客户端渲染
<hr>
<h2>静态页面生成 SSG</h2>
在文章列表页面里，其实每个用户查到的内容都是一样的
那为什么还需要在每个人的浏览器上渲染一遍呢？
为什么不在后端渲染好，然后发给每个人
这样就可以
N 次渲染变成了 1 次渲染
N 次客户端渲染变成了 1 次静态页面生成
这个过程成为 动态内容静态化
优缺点
优点：这种方式可以解决白屏问题、SEO 问题
缺点：所有用户看到的都是同一个页面，无法生成用户相关内容
如何实现
首先我们来想一个问题
该如何获取 posts 呢？因为加载数据的操作在后端，想通过 AJAX 获取 posts 显然不合适
答案是：通过 <code>getStaticProps</code> 获取 posts
<code>getStaticProps</code> 是 Next.js 提供的一个方法，会在后端执行，返回一个 props，NextPage 在渲染的时候可以使用这个 props
代码
<div class="highlight">
<pre><code class="language-js">import {GetStaticProps, NextPage} from 'next';
import {getPosts} from '../../lib/posts';
import Link from 'next/link';
import * as React from 'react';

type Post = {
id: string,
title: string
}

type Props = {
posts: Post[];
}
// props 中有下面导出的数据 posts
const PostsIndex: NextPage<Props> = (props) => {
const {posts} = props;
// 前后端控制台都能打印 -> 同构
console.log(posts);
return (
<div>
 <h1>文章列表</h1>
 {posts.map(p => <div key={p.id}>
 <Link href={`/posts/${p.id}`}>
 <a>
 {p.id}
 </a>
 </Link>
 </div>)}
</div>
);
};

export default PostsIndex;
// 实现SSG
export const getStaticProps: GetStaticProps = async () => {
const posts = await getPosts();
return {
props: {
 posts: JSON.parse(JSON.stringify(posts))
}
};
};
</code></pre>
</div>
<h2>前端是怎么不通过 AJAX 获取到数据的</h2>
posts 数据我们只在服务器获取了，但又是怎样传递给前端的呢？
发现玄机
<img src="https://pica.zhimg.com/v2-1c4c6d4165b1eef6565d7f160b8e6f92_1440w.jpg" width="884" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="884" data-rawheight="922" data-original-token="v2-1c4c6d4165b1eef6565d7f160b8e6f92" data-original="https://pica.zhimg.com/v2-1c4c6d4165b1eef6565d7f160b8e6f92_r.jpg">
我们可以看到玄机就藏在 id 为 <code>_NEXT_DATA__</code> 的 script 标签中，里面储存了传给前端的 props 数据
这就是同构 SSR 的好处，后端可以将数据直接传给前端，而不需要 AJAX 异步获取
<h2>静态化的时机</h2>
<h3>环境</h3>
<ol>
<li data-pid="4tIzTGy2">在 开发环境 ，每次请求都会运行一次 getStaticProps 这是为了方便你修改代码重新运行</li>
<li data-pid="FzY0m-ut">在 生成环境，getStaticProps 只在 build 是运行一次，这样可以提供一份 HTML 给所有的用户下载</li>
</ol>
如何体验生成环境
<div class="highlight">
<pre><code class="language-text">yarn build
yarn start</code></pre>
</div>
打包后我们可以会看到这样
<img src="https://pic3.zhimg.com/v2-c4e27d38c70297383ebd9b5727117c84_1440w.jpg" width="856" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="856" data-rawheight="383" data-original-token="v2-c4e27d38c70297383ebd9b5727117c84" data-original="https://pic3.zhimg.com/v2-c4e27d38c70297383ebd9b5727117c84_r.jpg">
解读
我看看到的页面前的三种图标，分别是 λ ○ ●
λ (Serve) SSR 不能自动创建 HTML (下面会介绍)
○ (Static) 自动创建 HTML (发现你没用到 props)
● (SSG) 自动创建 HTML + JSON (等你用到 props)
 
<h2>三种文件类型</h2>
build 完成后，我们查看.next 文件里面，发现 posts.html、posts.js、posts.json
<img src="https://pic4.zhimg.com/v2-d51e534b5a35297e8eb62f23b276bed7_1440w.jpg" width="611" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="611" data-rawheight="598" data-original-token="v2-d51e534b5a35297e8eb62f23b276bed7" data-original="https://pic4.zhimg.com/v2-d51e534b5a35297e8eb62f23b276bed7_r.jpg">
<ul>
<li data-pid="ia2fh9OR">posts.html 含有静态内容，用于用户直接访问</li>
<li data-pid="TTStooir">post.js 也含有静态内容，用于快速导航（与 HTML 对应）</li>
<li data-pid="qyRKCP7B">posts.json 含有数据，跟 posts.js 结合得到页面</li>
</ul>
为什么不直接把数据放入 posts.js 呢？
显然是为了 posts.js 接受不同的数据，当我们展示每篇博客的时候，他们的样式相同，内容不同，就会用到这个功能
动态内容静态化
<ul>
<li data-pid="fLXioS1A">如果动态内容与用户无关，那么可以提前静态化</li>
<li data-pid="BDqxPauv">通过 getStaticProps 可以获取数据</li>
<li data-pid="GDnC2eIb">静态内容+数据(本地获取) 就得到了完整的页面</li>
<li data-pid="iKkq8V_I">代替了之前的 静态内容+动态内容(AJAX 获取)</li>
</ul>
<hr>
<h2>服务端渲染（SSR）</h2>
如果页面和用户相关呢？
这种情况较难提前静态化，需要在 用户请求时，获取用户信息，然后 通过用户信息去数据库拿数据，如果非要做，就要给每个用户创建一个页面，有时候这些数据更新极快，无法提前静态化, 比如微博首页的信息流
那怎么办？
要么客户端渲染, 会出现白屏
要么服务端渲染 SSR，没有白屏
运行时机
无论时开发环境还是生成环境，都是在请求之后运行 getServerSideProps
代码
和 SSG 代码基本一致，不过使用了 getSeverSideProps
这段代码实现的时，服务器响应请求后获取浏览器信息，返回给前端展示
<div class="highlight">
<pre><code class="language-js">import {GetServerSideProps, NextPage} from 'next';
import * as React from 'react';
import {IncomingHttpHeaders} from 'http';

type Props = {
browser: string
}
const index: NextPage<Props> = (props) => {
return (
<div>
 <h1>你的浏览器是 {props.browser}</h1>
</div>
);
};
export default index;

export const getServerSideProps: GetServerSideProps = async (context) => {
const headers:IncomingHttpHeaders = context.req.headers;
const browser = headers['user-agent'];
return {
props: {
 browser
}
};
};
</code></pre>
</div>
SSR 原理
推荐 在后端 renderToString() 在前端 hydrate()
后端将页面渲染，返回 HTML String 格式，传递到前端，前端进行 hydrate() ,会保留 HTML 并附上时间监听，也就是说后端渲染 HTML，前端添加监听。
前端也会渲染一次，用以确保前后端渲染结果一致
<hr>
<h2>总结</h2>
<h3>客户端渲染 SSR</h3>
只在浏览器上运行，缺点 SEO 不友好，白屏
静态页面生成 SSG
Static Site Generation，解决白屏问题、SEO 问题
缺点：无法生成和用户相关的内容（所有用户请求的结果都一样）
服务端渲染（SSR）
解决白屏问题、SEO问题
可以生成用户相关的内容
 
<h2>三种渲染模式如何选择</h2>
<img src="https://picx.zhimg.com/v2-481174213d589ef81d46849a7a064331_1440w.jpg" width="1091" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="1091" data-rawheight="279" data-original-token="v2-481174213d589ef81d46849a7a064331" data-original="https://picx.zhimg.com/v2-481174213d589ef81d46849a7a064331_r.jpg">
<ul>
<li data-pid="LPXnujuF">有动态内容吗？没有什么也不用做，自动渲染为 HTML</li>
<li data-pid="NBzG8yG8">有动态内容，动态内容和客户端相关吗？相关就只能用客户端渲染 BSR</li>
<li data-pid="wb6PCNWh">有动态内容，动态内容跟请求/用户相关吗？相关就只能用服务端渲染 SSR 或 BSR</li>
<li data-pid="a2uAyils">其他情况可以用 SSG 或 SSR 或 BSR</li>
</ul>
</div>
</div>
</div>
</div>

</div>
<div id="MySignature" role="contentinfo">
漫思 
来源：https://www.cnblogs.com/sexintercourse/p/19071941

頁: [1]

琼殿技术论坛's Archiver

Next.js 的三种渲染方式（BSR、SSG、SSR）