[用next.js与传统SSR进行服务器端渲染

问题描述 投票:0回答:1

我非常习惯于SSR的方法,即SSR意味着页面得到了完全刷新并从服务器接收了完整的HTML,在服务器中,根据后端堆栈使用razor / pub / other呈现页面。因此,每次用户单击导航链接时,它只会向服务器发送一个请求,整个页面将刷新,并接收新的HTML。我了解这就是传统的SSR。

但是,使用SPA,例如,我们有react或angular,在开始时收到几乎空的HTML,然后是JS,以便整个应用程序在客户端初始化。然后,我们可以使用一些REST API来获取json数据并在前端(客户端路由和渲染)上渲染视图,而无需刷新页面。我们甚至不需要任何服务器。

现在,我有一个理解上的问题是SSR(例如next.js)如何与react一起工作。

从我正在阅读的内容中,第一个请求返回完整的HTML + CSS(这有助于SEO等-我明白了),但是稍后会发生什么?在第一个/初始请求之后会发生什么?整个react应用程序是否会在浏览器中初始化,然后像正常的SPA一样正常运行(这意味着我们从现在开始具有客户端路由和渲染功能,而无需向该服务器发出请求)?换句话说,next.js仍会在初始请求之后发出任何服务器请求,或者从现在起它是否像具有CRA的典型SPA一样?

我花了很多时间阅读,但是所有文章都主要关注初始请求和SEO以及到第一个字节,绘制等的时间,我只是试图理解为什么它称为SSR,因为它看起来与传统SSR不同我一开始就描述过。

javascript reactjs single-page-application next.js server-side-rendering
1个回答
0
投票

next.js仍会在初始请求之后发出任何服务器请求,或者从现在开始它是否像具有CRA的典型SPA一样?

您说对了。服务器处理第一个(初始)请求,然后前端处理路由(至少在Next.js情况下)。

[如果您想看一个示例,OpenCollective是用Next.js构建的。尝试使用它,然后在DevTools中查看“网络”选项卡。

我只是试图理解为什么将其称为SSR,因为它的工作方式似乎与我一开始所描述的传统SSR不同。

之所以称为SSR,是因为该应用已在服务器上有效呈现。前端路由在初始渲染后会引起注意,这一事实并不能消除服务器已将应用程序渲染为与用户计算机相反的事实。

© www.soinside.com 2019 - 2024. All rights reserved.