如何构建SSR

Question

我们目前正在使用

npm run generate

构建 Nuxt 应用程序并将其部署为静态站点生成器（SSG）。但是，我们遇到了一个问题，即应用程序被构建为客户端渲染（CSR）应用程序而不是服务器端渲染（SSR）。当我们查看页面源代码时，我们只能看到body标签内的

<div id="__nuxt"><div class="document-driven-page"><!----></div></div>

，不包括脚本。

这是部署的站点：https://document-driven-demo.netlify.app/ja/getting-started/introduction/

我们怀疑该问题可能与 default.vue 中的 v-if="isPageReady" 条件有关。但是，删除此条件会导致此处描述的另一个问题。

<script setup lang="ts">
const route = useRoute();
const { baseUrl } = useRuntimeConfig().public;
const { locale } = useI18n();
const shouldShowDrawer = ref(false);
const mobileLayout = ref(false);
const handleResize = () => {
  shouldShowDrawer.value = window.innerWidth >= 1023;
  mobileLayout.value = window.innerWidth <= 1023;
};
let redirectPath = route.path.endsWith('/')
  ? route.path.slice(0, -1)
  : route.path;

if (redirectPath.startsWith('/en')) {
  locale.value = 'en';
} else if (redirectPath.startsWith('/ja')) {
  locale.value = 'ja';
}
const isPageReady = ref(false);
if (process.client) {
  isPageReady.value = true;
  switch (redirectPath) {
    case '':
      navigateTo(redirectPath + '/ja', { replace: true });
      break;
  }
}

console.log('hogehogehohgoehgoegheohge');
// if (process.client) {
//   test.value = true;
// }
onMounted(() => {
  window.addEventListener('resize', handleResize);
  handleResize();
  console.log('mobileLayout', mobileLayout.value);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

let ogLocale = '';
if (redirectPath.startsWith('/ja')) {
  ogLocale = 'ja_JP';
} else if (redirectPath.startsWith('/en')) {
  ogLocale = 'en_US';
}

useSeoMeta({
  ogLocale,
  ogUrl: baseUrl + route.path,
  ogType: 'website',
  ogSiteName: '',
  ogImage: baseUrl + '/images/social-image.jpg',
  ogImageWidth: 1200,
  ogImageHeight: 627,
  ogImageType: 'image/png',
  // ogTitle: () => page.value?.head.title,
  twitterCard: 'summary_large_image',
  // twitterDescription: () => page.value?.description,
  twitterImage: baseUrl + '/images/social-image.jpg',
  twitterSite: '',
  // twitterTitle: () => page.value?.head.title,
});
const mobileDrawer = ref(false);
watch(mobileDrawer, (newVal, oldVal) => {
  console.log('mobileDrawer changed from', oldVal, 'to', newVal);
});
function handleMobileDrawerClicked(newValue: boolean) {
  mobileDrawer.value = newValue;
  console.log('変更');
}
</script>

<template>
  <v-app v-if="isPageReady">
    <div v-if="mobileDrawer" class="responsive-side-menu-wrapper">
      <ResponsiveSideMenu></ResponsiveSideMenu>
    </div>
    <Header
      :mobileDrawer="mobileDrawer"
      @mobileDrawerClicked="handleMobileDrawerClicked"
    />

    <div class="responsive-toc-wrapper" v-if="mobileLayout">
      <ResponsiveTableOfContents></ResponsiveTableOfContents>
    </div>
    <v-container>
      <div class="d-flex flex-0-1-100">
        <SideMenu v-if="shouldShowDrawer" />
        <v-main
          class="pl-0 pr-0 flex-shrink-1"
          :class="{ 'v-main-border': !mobileLayout }"
        >
          <slot />
          <NavigationLink />
        </v-main>
        <TableofContents v-if="shouldShowDrawer" />
      </div>
    </v-container>
    <Footer />
  </v-app>
</template>
<style lang="scss">
.v-main-border {
  border-left: 1px solid $border-color-gray;
  border-right: 1px solid $border-color-gray;
}
video {
  width: 100%;
}
// headerの背景色はresponsive-toc-wrapperのbackground-colorに設定されている
header {
  position: sticky !important;
  backdrop-filter: saturate(200%) blur(20px);
}
@media (max-width: 1023px) {
  header {
    background: none !important;
  }
}
.responsive-side-menu-wrapper {
  position: fixed;
  z-index: 1100;
  height: 100%;
}
.responsive-toc-wrapper {
  position: sticky;
  top: 64px;
  z-index: 1000;
  background-color: $bg-color-white !important;
  backdrop-filter: saturate(200%) blur(20px);
  border-bottom: 1px solid $border-color-gray;
}
.v-navigation-drawer {
  z-index: 0 !important;
}
</style>

我们希望将应用程序构建为 SSR，并找到一种方法来阻止显示部分构建的 HTML。任何指导将不胜感激。

复制存储库：https://github.com/newyee/nuxt-site

Answer 1

您无法使用yarngenerate构建SSR应用程序。你需要设置

ssr: true

在您的 nuxt.config.ts 文件中并通过

构建您的应用程序

yarn build

完成后您可以通过

预览结果

yarn preview

参考：https://nuxt.com/docs/guide/concepts/rendering