# NextJs服务端渲染技术

**Repository Path**: javafdx/nextjsssr

## Basic Information

- **Project Name**: NextJs服务端渲染技术
- **Description**: NextJs服务端渲染技术
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-10
- **Last Updated**: 2026-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### node
nvm use 22.12.0

npm run dev

### <section> 和 <nav> 都是语义化标签
使用它们代替通用的 <div> 可以让代码结构更清晰，
有利于搜索引擎优化（SEO）和无障碍访问（Accessibility屏幕阅读器）。
<section> 标签：代表文档中的一个独立章节或区域。
与 <div> 的区别：<div> 没有语义，仅用于样式布局；而 <section> 告诉浏览器和辅助技术“这里是一个独立的内容区块”。
<nav> 标签：含义：代表页面中的导航链接部分。

### 'use client' 
'use client' 是 Next.js (App Router) 中的一个指令（Directive），用于明确指定当前组件必须在**客户端（浏览器）**渲染和执行。
在 Next.js 的 App Router 中，默认情况下所有组件都是 React Server Components (RSC)，即在服务器端渲染。服务器组件有以下限制：

❌ 不能使用 State (useState, useReducer)
❌ 不能使用 Effects (useEffect)
❌ 不能使用浏览器专属 API (window, document, localStorage)
❌ 不能添加事件监听器 (onClick, onChange 等)
如果,此文件使用了useState 并且在没有 'use client'，Next.js 会在构建或运行时报错，因为服务器无法执行这些客户端特有的逻辑。

### 包裹关系
layout->template->errorBoundary->suspenseLoading->errorBoundary->page

### 服务端组件可以直接导入客户端组件，但客户端组件并不能导入服务端组件
1. 客户端组件尽可能下移
2. 在服务端组件中获取的数据，需要以 props 的形式向下传给客户端组件，这个数据需要做序列化

### 服务端渲染策略
*   静态渲染
*   动态渲染
*   Streaming

###  什么是 DevTools‑indicator
来源：在 Next.js（13.4 及以后）启动 next dev 时，框架会默认注入一个叫 Next DevTools 的调试面板。  
表现：页面左下角出现一个小按钮，点击后会弹出组件树、路由信息、缓存/ISR 状态等调试信息。  
目的：帮助开发者快速查看 Server‑/Client‑Component 边界、页面是否走了 ISR、路由参数等。
它不是浏览器插件，而是 Next.js 自带的 开发时 辅助工具，只有在 development server（next dev）运行时才会自动加载。
默认携带：是的，Next.js 在 next dev 时默认开启。  
生产环境：不会出现，只有开发服务器会注入。  
去掉方式：① 环境变量 NEXT_DISABLE_DEVTOOLS=1（推荐） ② 删除 <DevTools /> 组件 ③ 卸载 @next/devtools 包。