标签: server-side-rendering

我已经使用 firebase 商店创建了项目。现在我想在其上实现服务器端渲染。当我运行程序时，我为 ssr 做了所有事情之后，这就是我得到的

ReferenceError: window is not defined
    at Object.ex9U (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:166129:4)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.vvyD (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:271824:80)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.PCNd (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:131612:74)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.ZAI4 (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:154371:80)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.24aS (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:47619:69)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)

A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:63621

这是我的文件 package.json

{
    "name": "ng-blog",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "dev:ssr": "ng run ng-blog:serve-ssr",
        "serve:ssr": "node dist/ng-blog/server/main.js",
        "build:ssr": "ng build …

我使用 vue cli 创建了一个 vue 项目：

vue create myproject

我认为我这样做时的输出npm run build将是一个单页应用程序（SPA）。使用现有代码生成静态网站（SSG / Jamstack）需要什么？我知道我可以使用 Nuxt 轻松做到这一点，但我想知道如何在没有 Nuxt 的情况下做到这一点。

编辑：我认为我的意思是预先渲染一些页面，以便更好地进行搜索引擎优化。

要在sveltekit中导入和使用svg文件，我参考这篇文章 https://riez.medium.com/svelte-kit-importing-svg-as-svelte-component-781903fef4ae 顺便说一句，当我最终输入代码时

<svelte:component this={Logo} />

我收到如下错误

<svelte:component this={...}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

我希望有人帮助我解决这个问题。

我正在尝试在我的 Node Express 服务器和 React 应用程序中实现 SSR。

经过困难之后，我可以通过 webpack 和 babel 编译我的文件，但是当我尝试时，node dist/server.js我收到此错误：

internal/modules/cjs/loader.js:1080
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: Z:\alpha\node_modules\@babel\runtime\helpers\esm\defineProperty.js
require() of ES modules is not supported.
require() of Z:\alpha\node_modules\@babel\runtime\helpers\esm\defineProperty.js from Z:\alpha\dist\server.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename defineProperty.js to end in …

我正在尝试在我的 SSR next.js 应用程序上使用 cypress 和固定装置编写一些测试，该应用程序使用 Axios 连接到 RESTful API。但我在拦截 RESTful API 时遇到了麻烦cy.intercept()，因为 cypress 无法跟踪 SSR 中发送的请求，并且cy.intercept()仅适用于 cypress 可以跟踪的请求。有什么方法可以帮助我更改来自 RESTful API 的响应吗？任何软件包也会有帮助。

这是我的轮播，我正在使用react-multi-carousel和Nextjs，并且我正在激活 ssr 选项

import Carousel from 'react-multi-carousel'
import 'react-multi-carousel/lib/styles.css'

import CarouselImage from './CarouselImage'

const responsive = {
    desktop: {
        breakpoint: { max: 4000, min: 1024 },
        items: 1,
        paritialVisibilityGutter: 60,
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 1,
        paritialVisibilityGutter: 50,
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
        paritialVisibilityGutter: 30,
    },
}

const imageFolders = [
    '/images/carousel/post-1',
    '/images/carousel/post-2',
]

export default function CarouselComponent() {
    return (
        <div>
            <div>
                <div>
                    <Carousel
                        ssr
                        infinite={true} …

我有一个 nextjs 应用程序，需要根据用户的输入发出 api 请求。现在，api 请求需要一个令牌，我希望在应用程序启动时以及需要时根据 getServerSideProps 或其他内容的用户数据生成该令牌。我查看了很多选项，例如将其保存在 cookie 和 session 中，但我不认为我的用例能够达到目的，而且我还想了解如何在 nextjs 中完成它。基本上我需要一个

const data = {}

可从服务器上的每个请求进行访问，这样当服务器收到请求时，就不必重新获取已有的数据。

我们正在使用这种方法来呈现内容：

<div id="full-article" v-html="content"></div>
this.content = api.response.data

在这种方法中，“内容”是从 API 检索的，但因为我们还使用服务器端渲染 (SSR)，所以最终的 HTML 变成了这样：

<div id="full-article">$real_html_content</div>
this.content = $real_html_content

这种方法意味着内容会被重复，一次作为呈现的 HTML，一次作为 JavaScript 变量。但在这种情况下，我们没有使用 javascript 内容变量。事实上，它仍然包含在最终的 HTML 页面中，这意味着页面大小是所需大小的两倍。我们怎样才能防止这种情况发生呢？是否有某种方法可以隐藏/删除已由 SSR 呈现的 JavaScript 内容？

或者，也许以不同的方式处理这些内容会更好，也许在稍后阶段插入它而不涉及 Nuxt 或 SSR？

我正在使用 nuxt 生成完整的静态 Web 应用程序，如下所述https://nuxtjs.org/blog/going-full-static/#crazy-fast-static-applications

我有一个小博客也可以作为静态站点加载，因此我使用 fetch hook 从 api 加载数据。

async fetch() {
  this.posts = await fetch(`${this.baseApi}/posts`).then(res => res.json())
},

当我生成( npm run generate)时，获取的状态在内部正确生成dist/assets/static，因此当直接访问时/blog，状态被正确加载并且数据显示正确。但是，当我在主页上并使用访问博客时

this.$router.push

或一个

<nuxt-link to="/blog">Blog</nuxt-link>

获取到的状态没有加载，我必须再次调用api，或者在钩子中再调用this.$fetch()一次mounted()

我已经添加了一个

watch: {
  '$route.query': '$fetch'
}

到主页

使用导航时我需要正确加载获取的状态我还缺少什么？

澄清

我没有遇到 fetch hook 本身的任何问题，而是导航没有检索目标路由的状态。即使HTML在那里我也需要页面来获取目标路由的状态，当路由发生变化时，因为vue模板依赖于它，所以如果它没有加载，ui将不会显示任何内容，我被迫手动调用 fetch hook

为了更清晰的视图，这是我的开发工具在直接访问 /blog 时的屏幕截图，请注意如何正确检索 state.js（它包含所有渲染的内容）

以下是我的开发工具在访问 / 时的屏幕截图，然后使用 nuxt-link 或 this.$router.push 访问博客（相同的结果）

静态截图：

Blog.vue

<template>
  <b-container class="container blog">
    <b-row>
      <b-col lg="12" md="12" sm="12" cols="12" class="logo-col">
        <SbLogoSingle /> …

我有一个节点应用程序、一个用于前端的 next.js 应用程序、Redis 和 Postgres 作为数据库。我已经在不同的容器中对 Next.js 和 node.js 进行了 Docker 化。Docker-compose.yaml如下

version: '3'
services: 
  redis-server:
    image: 'redis'
    restart: always
  postgres-server:
    image: 'postgres:latest'
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_DB=postgres
    ports: 
      - "5433:5432"
    volumes:
        - ./docker/postgres/data/data/pg_hba.conf:/var/lib/postgresql/app_data/pg_hba.conf
        - ./src/db/sql/CREATE_TABLES.sql:/docker-entrypoint-initdb.d/CREATE_TABLES.sql
        - ./src/db/sql/INSERT_TO_TABLES.sql:/docker-entrypoint-initdb.d/INSERT_TO_TABLES.sql
        - ./src/db/sql/CREATE_FUNCTIONS.sql:/docker-entrypoint-initdb.d/CREATE_FUNCTIONS.sql
  node-app:
    build: .
    ports: 
      - "4200:4200" 
  client:
    build:
      context: ./client
      dockerfile: Dockerfile
    container_name: client
    restart: always
    volumes:
      - ./:/app
      - /app/node_modules
      - /app/.next
    ports:
      - 3000:3000

使用 SSR 时，我无法向 localhost:4200 发出请求。现在，我知道这是因为它们位于不同的容器中，如果请求不是来自客户端，则将在端口 4200 处检查客户端容器的服务器。现在，我不知道如何简单地使用容器名称或其他内容来引用容器来对 SSR 数据发出 API 请求（例如fetch('node-app/users') …