在`pages`目录下创建React组件,组件的名称将会成为URL的一部分。 构建Server-Side Rendering (SSR) 我们可以使用`getServerSideProps`方法对页面进行SSR渲染。在该方法中,我们可以获取数据,并将数据作为props传递给页面组件。 从数据库或API获取数据 返回数据 四、SSR的优化 启用缓存 当多个用户对同一内容进行访问时,...
Next.js 是 React 的全栈框架,主打服务端渲染,也就是 SSR(Server Side Rendering)。 它有一套非常强大但也很奇怪的路由机制。 这套路由机制是什么样的?为什么又说很奇怪呢? 我们试一下就知道了。 先创建个 Next.js 项目: npx create-next-app@latest 执行create-next-app,输入一些信息,Next.js 项目就创建...
SSR（Server Side Rendering）服务端渲染 SSR 也就是服务端渲染， 是指在服务器端将页面渲染成 HTML 后再返回给客户端。SSR 主要流程图 在 Next.js 中，如果启用了 SSR，那么每次的每次请求都会重新生成页面。想要开启 SSR，我们可以在定义组件的那个文件中暴露一个异步函数 getServerSideProps，这个方法类似于 get...
静态页面生成,对于不需要频繁更新的静态页面内容,适合SSR,不依赖服务端。 Server Side Rendering (SSR) 服务端渲染,对于需要频繁更新的静态页面内容,更适合使用SSR,依赖服务端。 IncreIncremental Site Rendering (ISR) 增量静态生成,基于页面内容的缓存机制,仅对未缓存过的静态页面进行生成,依赖服务端。 SSG / ISG ...
3. 服务器端渲染(Server-side Rendering,简称 SSR) 也称为 “动态渲染”,如果页面使用服务器端渲染,则会在每个请求中生成页面 HTML 。 页面要使用服务器端渲染,需要导出一个名为 getServerSideProps 的异步函数。假设页面需要预渲染频繁更新的数据(从外部API获取),可以编写 getServerSideProps,它获取这些数据并将...
Next.js有两种预渲染形式:静态生成(Static Generation)和服务端渲染(Server-side Rendering)。 不同之处在于他们为页面生成HTML代码的时间。 静态生成是一种在build阶段生成html的预渲染方式。预渲染的HTML的代码会被每个request复用 而服务端渲染是每次请求都生产新HTML ...
客户端渲染(Client-Side Rendering) 客户端渲染就是常规的React模式。 如果页面不需要上述的预渲染,则可以直接客户端渲染。比如一些后台管理系统以及其他与SEO无关的,且不强需要首屏加速的页面。 Bad news!! 上面提到的API——getStaticProps、getServerSideProps等在新的app路由中不受支持,但仍然可以在Page 路由中使...
Server Side Rendering (SSR) 服务端渲染,对于需要频繁更新的静态页面内容,更适合使用SSR,依赖服务端。 IncreIncremental Site Rendering (ISR) 增量静态生成,基于页面内容的缓存机制,仅对未缓存过的静态页面进行生成,依赖服务端。 SSG / ISR 都是非常适合博客类应用的,区别在于SSG是构建时生成,效率较低,ISR是基于...
Server Side Rendering (SSR) 服务端渲染,对于需要频繁更新的静态页面内容,更适合使用 SSR,依赖服务端。 IncreIncremental Site Rendering (ISR) 增量静态生成,基于页面内容的缓存机制,仅对未缓存过的静态页面进行生成,依赖服务端。 SSG / ISR 都是非常适合博客类应用的,区别在于SSG是构建时生成,效率较低,ISR是基于...
Next.js 提供了几种预渲染技术,包括服务器端渲染(SSR)、静态站点生成(SSG)和增量静态再生(ISR)。这些技术是现代 web 开发中提高性能、SEO 和用户体验的关键。 服务器端渲染(SSR) - Server Side Rendering 定义 SSR 是一种预渲染技术,其中页面的 HTML 是每次请求时在服务器上生成的。这意味着每当用户请求页面时...