标签: server-side-rendering

我有一个使用以下技术开发的大型Web应用程序:

• webserver:Node.js + Express
• 模板引擎:玉
• css引擎:少
• 客户端框架:AngularJS(v.1.x)
• 数据库:MongoDB

我很想切换到Angular 2并使用Angular 2 Universal来利用服务器端渲染.

自从我使用John Papa的风格指南启动项目后,(理论上)升级到Angular 2将不会是一个大问题.

我现在还没有解决的问题是在Angular 2的Component模板中使用Jade.

例:

@Component({
  selector: 'todo-app',
  template: `
    <h2>Todo</h2>
    <span>{{remaining}} of {{todos.length}} remaining</span>
    [ <a href="javascript: false" (click)="archive()">archive</a> ]
    <todo-list [todos]="todos"></todo-list>
    <todo-form (newTask)="addTask($event)"></todo-form>`,
  directives: [TodoList, TodoForm]
})

我想把Jade改成html而不是模板.

你对此有什么建议吗？有人有任何想法吗？

我想为我的ReactJS应用程序实现服务器端呈现.我用react-router.我routes.js作为webpack入口点并使用output.libraryTarget = "commonjs2"选项进行编译.然后我需要NodeJS脚本中的编译结果来进行渲染.但我有错误.Webpack将模块包装在以下代码中:

/* 277 */
/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function(Buffer, global) {
    if (global.foo) {
        /* ... */
    }
    /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(277).Buffer, (function() { return this; }())))

 /***/ }

当NodeJS尝试执行(function() { return this; }())其返回时undefined.在浏览器中它将返回window.为什么webpack使用这样的包装代码？如何使这个代码在NodeJS中工作？

我使用node-clone作为外部lib.它不使用任何其他库作为依赖.但是它的bundle中的webpack使缓冲区成为这个lib的依赖项.在buffer代码中,我遇到了错误Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined.它发生是因为在nodeJS (function() { return this; }())返回undefined.

我正在使用 react-helmet 并且在客户端上的检查窗口中一切正常，并且标签输出正确。但是，当我在生产中启动并且 SSR 在标签中启动时，源代码中没有显示，我根本没有收到任何错误。

我也尝试记录“字符串化”标题标签并得到：

<title data-react-helmet="true"></title>

这是一些代码：

这是我从中设置标签的页面组件之一，3 个页面组件的设置都与此相同。（我已经简化了组件渲染函数和数据对象，因为它们非常大，我确信这些没有错。）

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Helmet } from 'react-helmet';

// Components
import WorkGrid from 'universal/components/Grid';
import Wrapper from 'universal/components/Wrapper';
import Container from 'universal/components/Container';
import Hero from 'universal/components/Hero';
import PageWrapper from 'universal/components/PageWrapper';
import GridHeader from 'universal/components/GridHeader';

const data = {};

class Work extends PageComponent {

  render () {
    return ( …

在这里参考这张票：https : //github.com/zeit/next.js/issues/4210 我目前想知道为什么当您禁用 javascript 时，大多数使用现代中继和 NextJS 的内容不起作用。

我最初的猜测是，由于 NextJS 是一个用于服务器端渲染的 React 库，如果在 chrome 中禁用了 JavaScript，那么显然 React 不起作用。但是，NextJS 是服务器端渲染，因此在客户端禁用 javascript 应该不是问题？那么，为什么还会出现这个问题呢？

尝试使用 Babel 运行节点并做出反应时，@babel/register 不起作用

我在 SO 上查看了类似的问题，重新安装了节点 10.15.1，升级到最新版本 11.9。

以下是 package.json 中的相关依赖项：

"dependencies": {
    "@babel/core": "7.1.6",
    "@babel/polyfill": "^7.2.5",
    "@babel/register": "^7.0.0",
    "@svgr/webpack": "2.4.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-named-asset-import": "0.3.0",
    "babel-preset-react-app": "7.0.0",
    "react": "16.7.0",
    "react-app-polyfill": "0.2.0",
    "react-dev-utils": "7.0.1",
    "react-dom": "16.7.0",
    "resolve": "1.8.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.1.14",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.3"
}

尝试执行本教程中关于使用 react 运行 SSR 的内容。我的 index.js 看起来像这样：

require('@babel/polyfill');
require('@babel/register')({
ignore: [/\/(build|node_modules)\//,    
],
  presets: ['@babel/preset-env','@babel/preset-react'],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    'dynamic-import-node',

  ]
});

require('./server');

服务器.js

import express from 'express';
import path from …

我已经使用 Angular Universal 实现了服务器端渲染，我们的网站出现了问题，一切正常，但是在加载页面时，它加载了两次。一切都是根据 SSR 的 Angular Universal 指南完成的，任何人都可以帮助我有了这个问题。

我正在开发一个有角度的通用 SSR 应用程序，想为页面浏览添加 Google Analytics 跟踪，但无法让它工作。

我尝试过的大多数软件包都不适用于 SSR，因为它们试图直接访问窗口/文档。

最终我得到了一个我想分享的相当基本的解决方案。

我正在开始一个我决定使用 Next.js 的项目。但是我的经理不希望该应用程序在 SSR 中，因为它需要一个 Node 服务器。他希望它只是SPA。

现在我可以使用create-react-appReact来使用和创建应用程序，但我正在考虑利用 Next.js 路由和其他内置配置。

正如我在 Nuxt.js 中看到的，有一种使用'universal'or 'spa' mode 的方法，我正在搜索是否有任何方法可以'spa'在 Next.js 中制作。

我正在将旧堆栈移至下一个 js，我需要一些帮助。

我有一个 php 后端，每次更改路由时我想从该后端检查控制器，并且我想在服务器端执行此操作。

为了改变路线，我使用Link了next-routes，它只对客户端有效。

有什么方法可以在不刷新应用程序的情况下调用服务器端的控制器吗？

我有一个基于 nextjs 的项目。奇怪的是，HMR 在我的项目中无法正常工作。每次我进行更改时，我都必须重新运行该过程。我附上了我的下一个配置和 package.json 的详细信息：

下一个.配置：

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");

module.exports = withCSS(
  withSass({
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
          },
        },
      });

      return config;
    }
  })
);

包.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "antd": "^3.26.8",
    "chartjs": "^0.3.24",
    "classnames": "^2.2.6",
    "draft-js": "^0.11.4",
    "isomorphic-unfetch": "^3.0.0",
    "moment": "^2.24.0",
    "next": "^9.2.1",
    "node-sass": "^4.13.1",
    "react": …