标签: server-side-rendering

我知道angular2用于服务器端渲染.所以我想了解更多相关信息.

我对这个现象有以下问题.

1.什么是服务器端渲染？

它解决了什么问题？

它的应用是什么？

4.为什么使用服务器端渲染？

5.支持服务器端渲染的技术是什么？

6.in angular2,服务器端渲染有助于实现什么目标？

7.客户端和服务器端渲染之间的主要区别是什么？

8.哪些工具或框架可用于服务器端渲染？

感谢所有提前.

经过大量搜索后,我很难找到:

1. MJML处理动态数据和模板插值

我期待的是:

import { mjml2html } from 'mjml';

const context = {
  message: 'Hello World'
};

const view = mjml2html(template, context);

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>{message}</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

当我在服务器端呈现同步路由，然后客户端对 dom 进行水合时，我收到警告，因为客户端异步路由找不到组件。

另一方面，反应纤维和解试图去除这个不可水合的节点。所以该页面在客户端产生一个空白的闪光:(

根据下一个屏幕截图，服务器端渲染生成的节点将被删除。这个节点（div.home-page）是当前路由的动态组件

那么，如何告诉reconciler不要移除这个节点，因为它会被动态导入的对应组件补水呢？

一些代码片段以获得更多解释

路线定义

import {
  HomePage,
} from '../bundles/Bundles';

export default [
  {
    component: HomePage,
    path: '/',
    exact: true,
    strict: true,
  },
];

服务器端使用的 Bundles.js

export const HomePage = syncComponent('HomePage', require('../views/HomePage/HomePage'));

客户端使用的 AsyncBundles.js

export const HomePage = asyncComponent('HomePage', () => Promise.all([
  import('../views/HomePage/HomePage' /* webpackChunkName: 'HomePage' */),
  importCss('HomePage'),
]));

感谢NormalModuleReplacementPlugin webpack 插件，我可以从 Bundles.js 和 AsyncBundles.js 切换到服务器和客户端渲染

new webpack.NormalModuleReplacementPlugin(/Bundles\.js/, 'AsyncBundles.js')

HomePage.js 组件渲染一个简单的 div

<div className="home-page">Home Page</div>

渲染路由的主要 Wrapper.js

  <Route
    render={({ location }) => (
      <div className="app__wrapper"> …

我正在构建一个带有服务器端渲染 (SSR) 的单页 Web 应用程序 (SPA)。

我们有一个节点后端 API，它在 SSR 期间从节点服务器调用，在初始渲染后从浏览器调用。

我想编写 e2e 测试来配置 API 响应（如 with nock）并同时处理浏览器调用和 SSR 服务器调用。一些伪代码：

it('loads some page (SSR mode)', () => {
  mockAPI.response('/some-path', {text: "some text"}); // here i configure the mock server response
  browser.load('/some-other-page'); // hit server for SSR response
  expect(myPage).toContain('some text');
})   

it('loads some other page (SPA mode)', () => {
  mockAPI.response('/some-path', {text: "some other text"}); // here i configure another response for the same call
  browser.click('#some-link'); // loads another page client …

我是 Nuxt 的新手 - 将我的 vue 应用程序转换为它，并使其投入生产：gameslate.io

该应用程序正在使用该asyncData方法来获取游戏列表 - 但是完整的布局并未呈现在服务器上......

如果您查看页面源代码，您会看到 Nuxt 将所有数据放入 中window.__NUXT__，但没有网格 html。

获取数据后如何在服务器上呈现完整布局asyncData？

否则，谷歌无法抓取游戏列表 - 这对 SEO 来说变得非常无用......（查看 twitter 的页面源 - 它加载整个页面，包括动态内容）

这是进行 asyncData 调用的“主页”页面组件（简化）：

<template>
  <div>things</div>                       <!-- rendered on server -->
  <game-grid :games="games"></game-grid>  <!-- rendered in browser -->
</template>

<script>
  export default {
    data() {
      return {
        games: []
      }
    }
    async asyncData() {
      let games = await getGames(filters);
      return { games };
    }
  }
</script>

在搜索了angular Universal很多天后，我发现缺乏有关ServerSideRendering实际工作方式的信息。
让我引导您解决我的疑虑，并帮助我澄清一些模糊点。

有很多指南会告诉您如何设置SSR需要注意哪些事项，例如不访问 DOM 或不使用 jquery。
它们都没有真正展示 angular Universal 在幕后的实际工作方式，尤其是当您访问外部 api 时。

我希望一个普通的 SSR 应用程序只在服务器上运行，创建一些 html，然后加载 html，直到客户端下载 javascript代码。
但是在使用外部 api 的情况下会发生什么？（这是一个非常常见的场景）。
我们的应用程序的服务器版本是否进行了真正的调用，从 api 获取真实数据，以使用 html 进行渲染？还是发生了其他事情？

同样在通过路由解析器调用的外部 api 的情况下。在这种情况下，SSR 可能吗？这意味着我们的应用程序必须以任何一种方式等待 api 响应。

以下内容适用于NextJS的SSR.

我正在使用React的上下文来跟踪某些已安装组件的ID.要点是

class Root extends React.Component {
  getChildContext () {
    return {
      registerComponent: this.registerComponent
    }
  }

  registerComponent = (id) => {
    this.setState(({ mountedComponents }) => {
      return { mountedComponents: [...mountedComponents, id ] }
    })
  }

  ...
}

class ChildComponent {
  static contextTypes = { registerComponent: PropTypes.func }

  constructor(props) {
    super(props)

    props.registerComponent(props.id)
  }
}

不幸的是,这只适用于客户端.this.state.mountedComponents总是[]在服务器上.是否有另一种方法来跟踪服务器端的这些组件？基本上我需要使用id来提供脚本以在head文档中运行- 等到客户端应用程序安装,运行并手动附加到头部有点太慢.

更新

这里有一个简单的例子:https://github.com/tills13/nextjs-ssr-context

this.context是undefined在构造函数中Child,如果我将其移动到componentDidMount(当前在repo中以这种方式设置),它可以工作,但我希望这可以在服务器端解析.我没有死定context,如果有另一种方法可以做到这一点,我全都听见了.

对于服务器端渲染，我发现了两种方法：

• 下一个.js
• chrome 无头预渲染（例如react-snap）

NextJs 在 GitHub 上有很多明星和一个很棒的社区，但另一种方法（chrome 无头预渲染）似乎更干净，需要几乎零配置才能工作。

有没有人有与他们一起工作的经验？
每种方法的主要优缺点是什么？

我想用Meta标签让我的网站SEO友好.我正在我的应用程序中实现服务器端呈现.在此之后,我收到以下错误"ReferenceError:localStorage未定义." 请帮忙解决问题.

寻找你的回复.

我的package.json:

{


 "main": "server.js",
 "scripts": {
  "start-dev": "NODE_ENV=development webpack -w & NODE_ENV=development node server.js",
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {
  "axios": "^0.18.0",
  "express": "^4.15.3",
  "firebase": "^4.12.1",
  "html2canvas": "^1.0.0-alpha.12",
  "react": "^16.2.0",
  "react-adsense": "0.0.5",
  "react-dom": "^16.2.0",
  "react-facebook-login": "^4.0.1",
  "react-google-login": "^3.2.1",
  "react-meta-tags": "^0.3.0",
  "react-router-dom": "^4.2.2",
  "react-router-match-as-promised": "^1.0.5",
  "react-scripts": "1.1.1",
  "react-share": "^2.1.1",
  "react-slick": "^0.22.3"
 },
 "devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.25.0",
  "babel-loader": "^7.1.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react-app": "^3.1.2", …

问题： Angular SSR 控制台中的 [NetworkError] 没有附加信息。

控制台输出的图像

注意： 它似乎没有破坏代码

环境信息： Angular 8.1 SSR 与 NGINX 一起提供，运行在 docker 容器中。对另一个 docker 容器进行 Http 调用。其中 13 个是 XHR 调用。

我还没有找到有关此类问题的任何信息，我自己也没有彻底解决它。如果我最终解决它，我会回答它，尽管也许有人已经这样做了？