如何在NuxtJS中使用服务器端渲染(SSR)?

huangapple go评论43阅读模式
英文:

How to use Server-Side-Rendering (SSR) in NuxtJS?

问题

我尝试修改了一个 NuxtJS 应用的骨架,以便使用服务器端渲染(SSR)。
这并不起作用,我除了在 nuxtJS 配置文件中找到的 SSR 设置之外,找不到任何进一步的文档。

我从头开始使用 npx nuxi init xxx 创建了一个 NuxtJS 应用。

我在 nuxt.config.ts 中添加了以下设置:

export default defineNuxtConfig({
    ssr: true,
})

然后我从头启动了应用程序。它仍然在客户端渲染所有内容,至少在 HTML 中找不到 "Welcome..." 文本。

如何实现这一点?

更新:

在设置一个 NuxtJS 应用时有一个根本性的区别。

我发现使用 yarn create nuxt-app MyAppnpx nuxi init ... 能得到更好、更复杂的结果。
使用第一个选项,所有内容都预先配置为 SSR,并且可以立即运行。它还提供了有用的插件和配置。

英文:

I tried to change a NuxtJS app skeleton so that it uses Server Side Rendering (SSR).
It does not work and I could not find any further documentation besides the SSR-setting in the nuxtJS-config-file.

I setup a NuxtJS application from scratch with npx nuxi init xxx.

I added the following setting in nuxt.config.ts:

export default defineNuxtConfig({
    ssr: true,
})

Then I started the application from scratch. It still renders everything client side, at least the "Welcome..." text can't be found in the HTML.

How to achieve that?

Update:

there is a fundamental difference between setting up a NuxtJS application.

I found out that using yarn create nuxt-app MyApp gives a better and more sophisticated result than npx nuxi init ...
With the first one, everything is preconfigured as SSR and works out of the box that way. It also provides useful plugins and configs.

答案1

得分: 1

  1. 默认情况下,该应用程序配置为SSR,如果您将其移除,它肯定会正常工作。

  2. 此外,通过在您的nuxt.config.js文件中编写以下代码来设置应用程序,使用 target: "server"

  // 禁用服务器端渲染:https://go.nuxtjs.dev/ssr-mode
  ssr: true,

  // 目标:https://go.nuxtjs.dev/config-target
  target: "server",
英文:
  1. By Default the app is configured as a SSR, If you remove it, it will definitely going to work.

  2. Also, Add set the app by writing this code inside your nuxt.config.js file, using target: "server":

  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: true,

  // Target: https://go.nuxtjs.dev/config-target
  target: "server",

huangapple
  • 本文由 发表于 2023年5月20日 21:02:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/76295370.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定