WHAT - NextJS 系列之 Rendering - Server Rendering Strategies

2024-06-24 02:20

本文主要是介绍WHAT - NextJS 系列之 Rendering - Server Rendering Strategies,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 1. Static Rendering(静态渲染)
    • 特点:
    • 实现方式:
  • 2. Dynamic Rendering(动态渲染)
    • 特点:
    • 实现方式:
  • 3. Streaming Rendering(流式渲染)
    • 特点:
    • 实现方式:
  • 总结

相关官方文档:https://nextjs.org/docs/app/building-your-application/rendering/server-components#server-rendering-strategies

There are three subsets of server rendering: Static, Dynamic, and Streaming.

在 React 和 Next.js 中,服务器端渲染(SSR)有三种主要的实现方式:Static RenderingDynamic RenderingStreaming Rendering。这些方式在处理数据获取、页面渲染和响应客户端请求的方式上有所不同。

1. Static Rendering(静态渲染)

静态渲染是在构建时(Build Time)生成 HTML 文件的过程。这种方式适用于内容较少变化的页面,如博客文章、产品展示等。

特点:

  • 预渲染:在构建应用时,所有需要的页面都已经生成好静态 HTML 文件。
  • 高性能:因为生成的页面在构建时就已经完成,不需要在每次请求时重新生成。
  • CDN 友好:静态页面可以轻松部署到 CDN 上,实现快速分发和加载。

实现方式:

在 Next.js 中,使用 getStaticPropsgetStaticPaths 可以实现静态渲染。

// pages/post/[id].js
import { useRouter } from 'next/router';export default function Post({ post }) {return (<div><h1>{post.title}</h1><p>{post.content}</p></div>);
}// 在构建时调用
export async function getStaticPaths() {const paths = [ /* 预生成的路径数组 */ ];return { paths, fallback: false };
}export async function getStaticProps({ params }) {const post = await fetchPostData(params.id);return { props: { post } };
}

2. Dynamic Rendering(动态渲染)

动态渲染是在每次请求时生成 HTML 的过程。这种方式适用于内容频繁变化或依赖用户输入的页面,如用户仪表盘、搜索结果等。

特点:

  • 实时数据:每次请求都会触发服务器端渲染,确保用户获取最新数据。
  • 灵活性高:适合需要频繁更新内容或个性化内容的场景。
  • 性能开销:每次请求都会占用服务器资源,因此需要考虑服务器性能和响应时间。

实现方式:

在 Next.js 中,使用 getServerSideProps 可以实现动态渲染。

// pages/dashboard.jsexport default function Dashboard({ data }) {return (<div><h1>Dashboard</h1><p>{data}</p></div>);
}// 每次请求都会调用
export async function getServerSideProps(context) {const data = await fetchDataForDashboard();return { props: { data } };
}

3. Streaming Rendering(流式渲染)

流式渲染是一种逐步发送 HTML 到客户端的渲染方式,这样客户端可以尽早看到部分内容,而无需等待整个页面渲染完成。适用于大型页面或复杂应用的优化。

特点:

  • 快速响应:客户端可以更早地开始解析和渲染部分内容,提高感知性能。
  • 渐进增强:逐步发送内容,使用户感觉页面加载速度更快。
  • 适合大页面:对于需要渲染大量内容的页面非常有效。

实现方式:

在 Next.js 中,使用 React 18 引入的 React.lazySuspense 组件,结合新的流式渲染支持,可以实现流式渲染。

// pages/index.js
import ClientComponent from '../components/ClientComponent';export default function Home() {return (<div><h1>Next.js Streaming Example</h1><ClientComponent /></div>);
}// components/ClientComponent.js
'use client';import React, { Suspense } from 'react';
const ServerComponent = React.lazy(() => import('./ServerComponent'));export default function ClientComponent() {return (<div><h1>Client Component</h1><Suspense fallback={<div>Loading...</div>}><ServerComponent /></Suspense></div>);
}// components/ServerComponent.js
import React from 'react';export default function ServerComponent() {// 模拟服务器端数据获取const data = new Promise((resolve) => {setTimeout(() => resolve('Server-side Data'), 3000);});return (<div><h1>Server Component</h1><p>{data}</p></div>);
}

在这个示例中,通过 SuspenseReact.lazy 实现流式渲染。当用户访问页面时,服务器会立即发送初始的 HTML,客户端在接收并解析后,可以逐步加载 ClientComponentServerComponent,使用户能够尽早看到部分内容。

总结

  • 静态渲染(Static Rendering):在构建时生成静态 HTML,适用于内容较少变化的页面。
  • 动态渲染(Dynamic Rendering):在请求时生成 HTML,适用于内容频繁变化的页面。
  • 流式渲染(Streaming Rendering):逐步发送 HTML,提高感知性能,适用于大型页面或复杂应用。

这篇关于WHAT - NextJS 系列之 Rendering - Server Rendering Strategies的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1088919

相关文章

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

SQL Server清除日志文件ERRORLOG和删除tempdb.mdf

《SQLServer清除日志文件ERRORLOG和删除tempdb.mdf》数据库再使用一段时间后,日志文件会增大,特别是在磁盘容量不足的情况下,更是需要缩减,以下为缩减方法:如果可以停止SQLSe... 目录缩减 ERRORLOG 文件(停止服务后)停止 SQL Server 服务:找到错误日志文件:删除

Windows Server服务器上配置FileZilla后,FTP连接不上?

《WindowsServer服务器上配置FileZilla后,FTP连接不上?》WindowsServer服务器上配置FileZilla后,FTP连接错误和操作超时的问题,应该如何解决?首先,通过... 目录在Windohttp://www.chinasem.cnws防火墙开启的情况下,遇到的错误如下:无法与

一文详解SQL Server如何跟踪自动统计信息更新

《一文详解SQLServer如何跟踪自动统计信息更新》SQLServer数据库中,我们都清楚统计信息对于优化器来说非常重要,所以本文就来和大家简单聊一聊SQLServer如何跟踪自动统计信息更新吧... SQL Server数据库中,我们都清楚统计信息对于优化器来说非常重要。一般情况下,我们会开启"自动更新

JAVA虚拟机中 -D, -X, -XX ,-server参数使用

《JAVA虚拟机中-D,-X,-XX,-server参数使用》本文主要介绍了JAVA虚拟机中-D,-X,-XX,-server参数使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录一、-D参数二、-X参数三、-XX参数总结:在Java开发过程中,对Java虚拟机(JVM)的启动参数进

Windows server服务器使用blat命令行发送邮件

《Windowsserver服务器使用blat命令行发送邮件》在linux平台的命令行下可以使用mail命令来发送邮件,windows平台没有内置的命令,但可以使用开源的blat,其官方主页为ht... 目录下载blatBAT命令行示例备注总结在linux平台的命令行下可以使用mail命令来发送邮件,Win

MySQL 中的服务器配置和状态详解(MySQL Server Configuration and Status)

《MySQL中的服务器配置和状态详解(MySQLServerConfigurationandStatus)》MySQL服务器配置和状态设置包括服务器选项、系统变量和状态变量三个方面,可以通过... 目录mysql 之服务器配置和状态1 MySQL 架构和性能优化1.1 服务器配置和状态1.1.1 服务器选项

查询SQL Server数据库服务器IP地址的多种有效方法

《查询SQLServer数据库服务器IP地址的多种有效方法》作为数据库管理员或开发人员,了解如何查询SQLServer数据库服务器的IP地址是一项重要技能,本文将介绍几种简单而有效的方法,帮助你轻松... 目录使用T-SQL查询方法1:使用系统函数方法2:使用系统视图使用SQL Server Configu

SQL Server数据库迁移到MySQL的完整指南

《SQLServer数据库迁移到MySQL的完整指南》在企业应用开发中,数据库迁移是一个常见的需求,随着业务的发展,企业可能会从SQLServer转向MySQL,原因可能是成本、性能、跨平台兼容性等... 目录一、迁移前的准备工作1.1 确定迁移范围1.2 评估兼容性1.3 备份数据二、迁移工具的选择2.1

SQL Server使用SELECT INTO实现表备份的代码示例

《SQLServer使用SELECTINTO实现表备份的代码示例》在数据库管理过程中,有时我们需要对表进行备份,以防数据丢失或修改错误,在SQLServer中,可以使用SELECTINT... 在数据库管理过程中,有时我们需要对表进行备份,以防数据丢失或修改错误。在 SQL Server 中,可以使用 SE