Next.js -服务端组件如何渲染

#题引:我认为跟着官方文档学习不会走歪路

服务器组件渲染到客户端发生了什么?

  1. 请求到达服务器
    用户在浏览器中请求一个页面。
    Next.js 服务器接收到这个请求,并根据路由找到相应的页面组件。
  2. 服务器组件的渲染
    Next.js 识别出请求的页面包含服务器组件。
    服务器组件在服务器端执行,进行以下操作:
  • 数据获取:组件内部可以直接调用 API 或数据库获取所需的数据。
  • HTML 生成:根据获取的数据,构建 HTML 内容。
  1. 生成有效负载
    服务器组件生成的 HTML 和相关数据一起被称为React 服务器组件有效负载 (RSC Payload)
    有效负载是是渲染后的 React 服务器组件树的紧凑二进制表示,包括:
  • 服务器组件的渲染结果:组件的结构和内容,组件在服务器端获取的数据等
  • 客户端组件应该渲染的位置的占位符以及它们的 JavaScript 文件引用
  • 从服务器组件传递到客户端组件的任何 props
  1. 发送响应到客户端
    生成的有效负载通过 HTTP 响应发送到客户端。
  2. 客户端接收和渲染
    浏览器接收到服务器发送的 HTML 内容。
    浏览器解析 HTML,将其渲染为可视化的页面。此时,用户可以看到页面的内容,而无需等待 JavaScript 的加载和执行。
  3. 客户端交互
    如果页面中包含客户端组件(例如需要交互的部分),Next.js 会在客户端加载相应的 JavaScript。
    客户端组件会接管页面的交互逻辑,使得页面变得动态和响应式。

服务器组件不同的渲染策略

服务器渲染有三种子类型:静态、动态和流式传输。

1: 静态渲染(默认)
使用静态渲染时,路由会在构建时渲染,或在数据重新验证后在后台渲染
步骤:

  • 构建时生成:在构建时,Next.js 预先生成页面的 HTML。
  • 数据获取:在构建时获取数据并生成静态 HTML。
  • 发送静态文件:将生成的静态 HTML 文件存储在 CDN 上。
  • 客户端请求:用户请求页面时,直接从 CDN 获取静态 HTML。
  • 客户端渲染:浏览器解析并渲染页面。

这种实现方式称之为静态生成SSG,静态渲染本身不依赖于 CDN,但结合使用 CDN 可以显著提高性能和用户体验。是否使用 CDN 取决于具体的项目需求和部署策略。

默认使用静态渲染的意思是:在渲染过程中,如果发现动态 API或未缓存的数据请求(这些数据通常是实时生成的,或者是用户特定的、频繁变化的信息),Next.js 将切换到动态渲染整个路由,否则就会默认为静态渲染,它将在 next build 时被预渲染为静态页面。这些动态API包括:

  • cookies
  • headers
  • connection
  • draftMode
  • searchParams prop
  • unstable_noStore
  • unstable_after

2: 动态渲染
使用动态渲染时,路由会在请求时为每个用户渲染,它的流程即上面“服务器组件渲染到客户端发生了什么?“标题下所描述的用例步骤。

当路由具有针对用户个性化的数据或只能在请求时获知的信息时,动态渲染很有用,比如 cookies 或 URL 的搜索参数。

3:流式传输
流式传输(Streaming)是一种用于优化数据加载和页面渲染的技术。它允许服务器在生成页面时逐步发送内容,而不是等待整个页面生成完成后一次性返回。这种方式可以提高用户体验,特别是在处理大型数据集或复杂页面时。

你可以使用 loading.js 和带有 React Suspense 的 UI 组件开始流式传输路由段。

  • loading.js 文件用于定义加载状态的 UI。当某个路由段正在加载时,loading.js 可以提供一个用户友好的加载指示器或占位符。
  • Suspense 组件允许你在等待某些异步操作(如数据加载)完成时,显示一个替代的 UI(例如加载指示器),然后在操作完成后切换到你的组件。

服务端和客户端组合模式

大多数 Next.js 应用采用的是服务端和客户端的组合模式。这种模式结合了服务器端渲染(SSR)和客户端渲染(CSR)的优点。

  • 服务器生成完整的 HTML 页面并发送给客户端。这样可以确保用户在首次加载页面时快速看到内容
  • 客户端使用 JavaScript 在浏览器中动态加载和渲染数据。通常在用户与页面交互时(如点击按钮、导航等)进行数据请求。

Nextjs默认服务端组件,如果要使用客户端组件,可以在文件顶部、导入语句之前添加 React 的 “use client” 指令。

实现这种模式内部会涉及到一个API:hydrateRoot,(在 React 18 之前的版本,使用的是 ReactDOM.hydrate)它的主要作用是将服务端生成的 HTML 内容与客户端的 React 组件树进行“水合”(hydration),以便实现客户端的交互功能。

水合:将服务端渲染的静态 HTML 内容与客户端的 React 组件进行结合,使得 React 可以接管这些内容,添加交互性。在水合过程中,React 会保留组件的状态,使得用户在加载页面时不会丢失之前的状态。

服务端组件和客户端组件的不同使用场景的快速总结:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/62372.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何构建一个高效安全的图书管理系统

文章目录 技术栈功能需求实现步骤1. 准备开发环境2. 创建项目结构3. 配置数据库4. 创建实体类5. 创建仓库接口6. 创建服务类7. 创建控制器8. 创建前端页面9. 运行项目 技术栈 前端:HTML5、CSS3、JavaScript后端:Java(Spring Boot框架&#x…

MongoDB注入攻击测试与防御技术深度解析

MongoDB注入攻击测试与防御技术深度解析 随着NoSQL数据库的兴起,MongoDB作为其中的佼佼者,因其灵活的数据模型和强大的查询能力,受到了众多开发者的青睐。然而,与任何技术一样,MongoDB也面临着安全威胁,其…

架构03-事务处理

零、文章目录 架构03-事务处理 1、本地事务实现原子性和持久性 (1)事务类型 **本地事务:**单个服务、单个数据源**全局事务:**单个服务、多个数据源**共享事务:**多个服务、单个数据源**分布式事务:**多…

基于深度学习的手势识别算法

基于深度学习的手势识别算法 概述算法原理核心逻辑效果演示使用方式参考文献 概述 本文基于论文 [Simple Baselines for Human Pose Estimation and Tracking[1]](ECCV 2018 Open Access Repository (thecvf.com)) 实现手部姿态估计。 手部姿态估计是从图像或视频帧集中找到手…

硬件基础22 反馈放大电路

目录 一、反馈的基本概念与分类 1、什么是反馈 2、直流反馈与交流反馈 3、正反馈与负反馈 4、串联反馈与并联反馈 5、电压反馈与电流反馈 二、负反馈四种组态 1、电压串联负反馈放大电路 2、电压并联负反馈放大电路 3、电流串联负反馈放大电路 4、电流并联负反馈放大…

亚马逊开发视频人工智能模型,The Information 报道

根据《The Information》周三的报道,电子商务巨头亚马逊(AMZN)已开发出一种新的生成式人工智能(AI),不仅能处理文本,还能处理图片和视频,从而减少对人工智能初创公司Anthropic的依赖…

Spring Boot教程之十二: Spring – RestTemplate

Spring – RestTemplate 由于流量大和快速访问服务,REST API越来越受欢迎。REST 不是一种协议或标准方式,而是一组架构约束。它也被称为 RESTful API 或 Web API。当发出客户端请求时,它只是通过 HTTP 将资源状态的表示传输给请求者或端点。传…

el-table 根据屏幕大小 动态调整max-height 的值

<template><div><p>窗口高度&#xff1a;{{ windowHeight }} px</p></div> </template><script> export default {data() {return {// 下面的 -250 表示减去一些表单元素高度 这个值需要自己手动调整windowHeight: document.docume…

通过 JNI 实现 Java 与 Rust 的 Channel 消息传递

做纯粹的自己。“你要搞清楚自己人生的剧本——不是父母的续集&#xff0c;不是子女的前传&#xff0c;更不是朋友的外篇。对待生命你不妨再大胆一点&#xff0c;因为你好歹要失去它。如果这世上真有奇迹&#xff0c;那只是努力的另一个名字”。 一、crossbeam_channel 参考 cr…

SQL EXISTS 子句的深入解析

SQL EXISTS 子句的深入解析 引言 SQL&#xff08;Structured Query Language&#xff09;作为一种强大的数据库查询语言&#xff0c;广泛应用于各种数据库管理系统中。在SQL查询中&#xff0c;EXISTS子句是一种非常实用的工具&#xff0c;用于检查子查询中是否存在至少一行数…

Python 3 教程第22篇(数据结构)

Python3 数据结构 本章节我们主要结合前面所学的知识点来介绍Python数据结构。 列表 Python中列表是可变的&#xff0c;这是它区别于字符串和元组的最重要的特点&#xff0c;一句话概括即&#xff1a;列表可以修改&#xff0c;而字符串和元组不能。 以下是 Python 中列表的方…

构建现代Web应用:FastAPI、SQLModel、Vue 3与Axios的结合使用

FastAPI介绍 FastAPI是一个用于构建API的现代、快速&#xff08;高性能&#xff09;的Web框架&#xff0c;使用Python并基于标准的Python类型提示。它的关键特性包括快速性能、高效编码、减少bug、智能编辑器支持、简单易学、简短代码、健壮性以及标准化。FastAPI自动提供了交互…

CSS笔记(一)炉石传说卡牌设计1

目标 我要通过html实现一张炉石传说的卡牌设计 问题 其中必须就要考虑到各个元素的摆放&#xff0c;形状的调整来达到满意的效果。通过这个联系来熟悉一下CSS的基本操作。 1️⃣ 基本概念 在CSS里面有行元素&#xff0c;块元素&#xff0c;内联元素&#xff0c;常见的行元…

文本搜索程序(Qt)

头文件 #ifndef TEXTFINDER_H #define TEXTFINDER_H#include <QWidget> #include <QFileDialog> #include <QFile> #include <QTextEdit> #include <QLineEdit> #include <QTextStream> #include <QPushButton> #include <QMess…

GAMES101:现代计算机图形学入门-笔记-09

久违的101图形学回归咯 今天的话题应该是比较轻松的&#xff1a;聊一聊在渲染中比较先进的topics Advanced Light Transport 首先是介绍一系列比较先进的光线传播方法&#xff0c;有无偏的如BDPT&#xff08;双向路径追踪&#xff09;&#xff0c;MLT&#xff08;梅特罗波利斯…

【C++篇】排队的艺术:用生活场景讲解优先级队列的实现

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…

【unity】WebSocket 与 EventSource 的区别

WebSocket 也是一种很好的选择&#xff0c;尤其是在需要进行 双向实时通信&#xff08;例如聊天应用、实时数据流等&#xff09;时。与 EventSource 不同&#xff0c;WebSocket 允许客户端和服务器之间建立一个持久的、全双工的通信通道。两者的区别和适用场景如下&#xff1a;…

Oracle 数据库 IDENTITY 列

IDENTITY列是Oracle数据库12c推出的新特性。之所以叫IDENTITY列&#xff0c;是由于其支持ANSI SQL 关键字 IDENTITY&#xff0c;其内部实现还是使用SEQUENCE。 不过推出这个新语法也是应该的&#xff0c;毕竟MyQL已经有 AUTO_INCREMENT列&#xff0c;而SQL Server也已经有IDENT…

前端学习笔记之文件下载(1.0)

因为要用到这样一个场景&#xff0c;需要下载系统的使用教程&#xff0c;所以在前端项目中就提供了一个能够下载系统教程的一个按钮&#xff0c;供使用者进行下载。 所以就试着写一下这个功能&#xff0c;以一个demo的形式进行演示&#xff0c;在学习的过程中也发现了中文路径…

【阅读记录-章节4】Build a Large Language Model (From Scratch)

文章目录 4. Implementing a GPT model from scratch to generate text4.1 Coding an LLM architecture4.1.1 配置小型 GPT-2 模型4.1.2 DummyGPTModel代码示例4.1.3 准备输入数据并初始化 GPT 模型4.1.4 初始化并运行 GPT 模型 4.2 Normalizing activations with layer normal…