标签: server-side-rendering

基本上，我们有一个模块可以读取服务器端渲染上的客户端数据，并应该将数据提供给 renderToString 和它找到的数据（客户端使用 a 进行渲染window.__SOME_DATA__，但我不想在快速路由上使用全局)

这是我们所在的位置：

const contentService = new ServerService();
const app = (
  <StaticRouter context={context} location={req.url}>
    <App/>
  </StaticRouter>
);

try {
  await contentService.getSomeData(app);
} catch (error) {
  console.log('THERE WAS A MARKUP ERROR', error);
}

const markup = renderToString(
  contentService.withProvider(
    app
  )
);

服务器服务如下所示：

export class ServerService {
  items = {};

  getSomeData = async (app) => {
    // gets some server side data and saves it to the `items` object
  };

  withProvider = (app) => {
    const …

我正在尝试使用 V8Js 在 Laravel 中使用 VueJS 和 VueRouter 实现 SSR，但我不断出现此错误：

V8JsScriptException
V8Js::compileString():1812: ReferenceError: document is not defined

V8JsScriptException
V8Js::compileString():1812: ReferenceError: document is not defined

      ...

      $js =
            <<<EOT
            var process = { env: { VUE_ENV: "server", NODE_ENV: "production" } }; 
            this.global = { process: process }; 
            var url = "$path";
EOT;
        $v8 = new \V8Js();

        $v8->executeString($js);
        $v8->executeString($renderer_source);

        $v8->executeString($app_source);
        $markup = ob_get_clean();
        return $markup;

       ...

在 SSR 中没有窗口或文档，我知道，但我不知道我的错误在哪里。如果还有需要的细节我可以提供，谢谢。

我创建了一个网站，使用 Angular 6 作为前端，使用 .Net Core 2.0 作为后端。我没有启用 SSR，到目前为止一切正常。现在，我正在尝试按照 Angular Universal 文档（https://angular.io/guide/universal）和 .Net Core 文档（https://docs.microsoft.com/en-us/aspnet/core）启用 SSR /client-side/spa/angular?view=aspnetcore-2.1&tabs=visual-studio&utm_source=jeliknes&utm_medium=blog&utm_campaign=medium&WT.mc_id=medium-blog-jeliknes#server-side-rendering）但失败了！

我认为问题出在 main.server.ts 文件上 - 根据 .NET Core 文档，我的 main.server.ts 应该如下所示：

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModule, renderModuleFactory } from '@angular/platform-server';
import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode } from '@angular/core';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { createServerRenderer } from 'aspnet-prerendering';
export { AppServerModule } from './app/app.server.module';

enableProdMode();

export default createServerRenderer(params => {
  const …

将 CSR 和 SSR 结合起来的正确方法是什么？基本上我有一个网站，其中一些路线（主要是网络的外部/展示部分 - 如主页、关于、定价等）需要 SS 呈现，主要是出于 SEO 的原因。然后我有一个应用程序部分，我想让 CS 渲染。当 SSR 需要“ReactDOM.hydrate()”时，我如何才能实现这一点，而“ReactDOM.hydrate()”对 CSR 不起作用（如果我理解正确的话）。

由于 webpack 4 和 react-loadable，我刚刚开始在服务器端使用代码拆分和动态导入来渲染 react 16 应用程序。

我的问题可能听起来很愚蠢，但有些事情我不太明白。

在服务器端，我在等待 webpack 加载所有模块，然后再将 html 吐出到客户端。

在客户端，在渲染加载的组件之前，我渲染了一种加载组件。

所以基本上服务器呈现加载的组件：

<div>loaded component</div>

客户端对加载组件进行水合：

<div>loading...</div>

显然，问题是 React 在 hydrate() 之后抱怨，因为服务器和客户端之间存在未命中匹配。

在几秒钟内，客户端首先呈现

<div>loading...</div>

而服务器已呈现并发送到客户端，加载组件的 html。

有人可以启发我吗？它是如何工作的？加载组件时如何防止首次渲染时出现不匹配？

我已经克隆了这个项目https://github.com/enten/angular-universal 一切正常，我可以在 chrome 上查看源页面但是当我尝试动态更改数据（例如标题）时，当我检查Chrome 中的页面源。为什么？有没有办法改变服务器端的内容？

有关更多信息，我有一个显示评论列表和用于添加评论的输入字段的应用程序。第一次加载页面时，我可以在“页面源”中看到评论列表。但是当我添加评论，并查看页面来源时，内容与初始值相同。下面是一个简单的例子

这是 post.component.html

<p>{{result}}</p>
<button (click)="changeMessage()">Clique moi</button>

和 post.component.ts

import { Component, OnInit, PLATFORM_ID, Inject, NgZone } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';

const RESULT_KEY = makeStateKey<string>('result');
declare var window: any;

@Component({
    selector: 'app-post',
    templateUrl: './post.component.html',
    styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {
    public result;
    private isServer: boolean;
    constructor(
        private tstate: TransferState,
        @Inject(PLATFORM_ID) platformId,
        private _ngZone: NgZone
    ) {
        this.isServer = isPlatformServer(platformId);
    } …

我正在使用 Next js 对我的应用程序进行服务器端渲染。但是，我还需要连接到使用 websockets 的 Gamesparks 库（用于身份验证）。每次我尝试将我的脚本添加到 head 标签时，我都会收到它不工作的错误。是否可以在 Next js 中使用 websockets？我已经看到很多关于 socket io 的内容，并且正在考虑它，但是我必须重新编写附加的库。我也很好奇，我应该尝试做我自己的后端 Express 服务器来管理这些连接吗？

正如您可能会说的，我是网络开发的新手，因此将不胜感激任何资源或建议！

来自浏览器的错误信息是http://localhost:3000/gamesparks/gamesparks-rt.js net::ERR_ABORTED 404 (Not Found)

我已经为此工作了两天。查看了多个堆栈帖子，仍然没有找到合适的答案。

我正在尝试在服务器中渲染我的 React 项目，如下所示：

服务器.js

function handleRender(req,res){

  const sheetsRegistry = new SheetsRegistry();

  const sheetsManager = new Map();

  const theme = createMuiTheme({
    palette:{
      primary:green,
      accent: red,
      type: 'light',
    }
  })

  const generateClassName = createGenerateClassName();

  const html = ReactDOMServer.renderToString(
    <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
      <MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
        <TwoFA />
      </MuiThemeProvider>
    </JssProvider>
  )

  const css = sheetsRegistry.toString()

  res.send(renderFullPage(html,css))
}

function renderFullPage(html,css){
  return   `
    <!DOCTYPE html>
    <html>
      <head>
        <title>2FA SDK</title>
      </head>
      <body style="margin:0">
        <div id="app">${html}</div>
        <script id="jss-server-side">${css}</script>
      </body>
    </html>
  `
}

客户端.js：

import React from 'react'; …

我们正在建立一个使用 Ionic 4 + Angular 7 的测试应用程序，使用 Angular Universal for SSR。将 Ionic 添加到组合中后，我们在尝试为应用程序提供服务时收到以下错误。直觉是它与SSR有关，但由于文档有限且难以找到示例项目，我们一直无法解开这个谜。

/Users/jsmith/Documents/workspace/website2.0/node_modules/@ionic/angular/dist/fesm5.js:1
(function (exports, require, module, __filename, __dirname) { import { __extends, __awaiter, __generator, __assign } from 'tslib';
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)

为了在 ssr 模式下部署我们的 nuxt 网站，我们首先在 bitbucket 管道中构建和单元测试网站，如果测试是绿色的，我们将构建文件从 bitbucket 服务器复制到我们的生产服务器并触发启动。

问题是 Nuxt 文档没有说明服务器上需要哪些确切的文件。

目前我们正在使用：

.nuxt/  
server/  
static/  
nuxt.config.js 

有时在向网站添加功能后，部署的版本会引发错误：

Error: Server resources are not available!

同时本地版本工作正常。
在项目上本地运行生产服务器也有效。错误有点暗示nuxt错误地选择了一些路径..但​​目录结构完全相同。

任何想法为什么会发生这种情况以及如何解决这个问题？