服务端渲染(SSR)与静态网站生成(SSG)：Next.js入门

服务端渲染（SSR）指的是在服务器上动态生成HTML页面的过程，这些页面在加载到浏览器前已包含了所有必需的数据和元素。

与之相对的是静态网站生成（SSG），它在构建阶段就生成了所有页面的HTML文件，这些文件可以被部署到CDN上，实现快速的内容分发。

SSR的优势：

• SEO友好：搜索引擎更容易抓取服务端渲染的页面。
• 首屏加载快：用户无需等待所有JavaScript都加载执行完毕。

SSG的优势：

• 更快的页面加载速度：静态页面可以被CDN缓存，并且不需要额外的服务器时间处理请求。
• 安全性更好：静态文件不太可能遭到服务器端的安全攻击。

Next.js框架介绍

Next.js是一个轻量级的React服务端渲染应用框架，集成了Webpack、Babel等现代web开发的多项技术。Next.js的热门特性包括：

• 自动代码分割：提高页面加载速度。

• 静态导出：将React应用导出为静态应用。
• API路由：轻松创建API接口。

第三章：Next.js的SSR实现

在Next.js中，页级的SSR通过getServerSideProps或getInitialProps函数实现，它们在每个请求中被调用，并返回一个对象，其中包含了渲染页面所需的props。

代码示例：使用getServerSideProps：

import { GetServerSideProps } from 'next'; 
export const getServerSideProps: GetServerSideProps = async (context) => { 
const res = await fetch(`https://api.example.com/data`); 
const data = await res.json(); 
return { props: { data }, // 将会被传递到页面组件作为props 
};
};
const Page = ({ data }) => { 
return ( 
<div> 
{/* 渲染获取到的数据 */} 
{data.map((item) => ( <p key={item.id}>{item.content}</p> ))} </div> ); 
}; 
export default Page; 

在服务器收到请求后，getServerSideProps将被调用，获取数据并作为props传递给React组件。当组件被渲染时，它会使用这些props来生成完整的页面。

第四章：Next.js的SSG实现

SSG是Next.js 9.3以后引入的功能，通过getStaticProps和getStaticPaths来实现静态页面的生成。

实现SSG的步骤： 1. 使用getStaticProps来获取必要的数据。 2. 如果你的页面路径依赖于外部数据，使用getStaticPaths来定义这些路径。 3. 将这些数据传递给React组件。

代码示例：使用getStaticProps和getStaticPaths：

import { GetStaticProps, GetStaticPaths } from 'next'; 
export const getStaticProps: GetStaticProps = async () => { 
const res = await fetch(`https://api.example.com/data`); 
const data = await res.json(); 
return { props: { data }, }; }; 
export const getStaticPaths: GetStaticPaths = async () => { 
const paths = [ { params: { id: '1' } }, 
{ params: { id: '2' } } // 更多路径... ]; 
return { paths, fallback: false }; }; 
const Page = ({ data }) => { // 静态内容的渲染 
return ( <div> {data.map((item) => ( <p key={item.id}>{item.content}</p> ))} </div> ); }; 
export default Page; 

通过这种方式，Next.js会在构建时生成每个静态页面，并在全球CDN上进行部署。这些页面在请求时将立即可用，无需运行额外的服务器端代码。

总结：

服务端渲染（SSR）和静态网站生成（SSG）的基本区别在于内容的生成时机和方式。

服务端渲染（SSR）的特点：

• 动态生成：当用户发起请求时，服务器实时渲染页面内容。
• 服务器负载：每个页面请求都需要服务器处理，这会导致服务器负载较高。
• 用户请求响应：内容是在用户请求时生成，因此可以提供最新的数据。
• SEO优化：由于页面内容在到达浏览器前已经渲染，这有助于改善搜索引擎优化（SEO）。

• 首屏时间：相较于客户端渲染（CSR），SSR可以更快地显示首屏内容。

静态网站生成（SSG）的特点：

• 预构建页面：页面在构建阶段生成，并作为静态文件存储，通常部署在CDN上。

• 无服务器处理：请求静态页面不需要服务器动态生成内容，减少了服务器的计算负担。
• 缓存优势：静态文件可以被缓存，提供即时的页面加载体验。
• 数据更新：更新内容需要重新构建静态页面。

SEO优化：静态页面易于被搜索引擎抓取，因此同样有良好的SEO表现。 总的来说，SSR是在每次用户请求时在服务器端生成页面内容，适合内容经常变化的应用；而SSG是在构建时生成所有页面，并将其部署为静态资源，适合内容不经常更新或变化的网站。两者都有各自的应用场景和优势，开发者可以根据具体需求选择适合的渲染策略。