标签: server-side-rendering

将@atalaskit/form从版本 2.1.2 更新到最新版本 (5.2.7)后，我遇到了问题。

这个新更新利用了export { default } from './File'我认为我的 babel 和/或 webpack 不支持的功能。

到目前为止，我发现 create-react-app 2.1.8 可以很好地运行此语法。

另外，我在这里找到了这种语法： https: //github.com/tc39/proposal-export-default-from

我尝试将此提案包含在我的 .babelrc 文件中，但错误仍然存​​在。

@atlaskit/form/index.js（错误出现的地方）

export { default } from './Form';
export { default as FormHeader } from './FormHeader';
export { default as FormFooter } from './FormFooter';
export { default as FormSection } from './FormSection';
export { default as Field } from './Field';
export { default as CheckboxField } from './CheckboxField';
export { HelperMessage, ErrorMessage, ValidMessage } …

我们有一个 Angular 应用程序 (SSR)，我需要在构建期间内联一些 SVG 图标。这主要是为了减少我们节点服务器的点击。

我们使用angular-svg-icon在运行时内联 SVG。我研究了ng-inline-svg它也在运行时运行。

我不想手动将它们添加到 HTML 中，以免污染代码。有没有办法在编译/构建期间执行此操作？

我正在使用 nuxtjs 在服务器上渲染我的页面。使用 asyncdata 在我的页面中加载数据是没有问题的，但是如何在包括页眉和页脚的默认布局中加载数据？因为 asyncdata 在那里不可用。我应该在商店内使用 nuxtServerInit 还是还有其他方法？

格雷戈尔

我正在开发一个多页面网站，前端使用 Next.js，后端使用 Strapi。在博客页面上，数据是从数据库动态获取的。我正在尝试使用 Masonry 以自适应布局显示这些数据。

我遇到的问题是，在第一次加载时，页面在单个垂直列中显示每个网格项。重新加载时，砌体布局就会生效，但有一些重叠的项目。第二次重新加载时，所有内容都会正确显示，甚至可以响应。但是，如果我离开该页面并返回，则会回到第一个方块。

这是博客页面的代码：

import React from 'react';
import Layout from '../components/StaticLayout';
import Link from 'next/link';
import fetch from 'isomorphic-unfetch';
import '../../static/styles.min.css';

let Masonry = '';

export default class Blog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      appIsMounted: false
    }
  }

  static async getInitialProps() {
    const res = await fetch('http://localhost:1337/blogposts');
    const data = await res.json();

    return {
      posts: data
    };
  }

  async componentDidMount() {
    let masonry = await import('masonry-layout');
    this.setState({
      appIsMounted: true
    })
  }

  render() …

所以我有一个使用 Next.js 的 SSR 应用程序。我使用的是利用 WEB API 的第 3 方组件，因此需要将其加载到客户端而不是服务器上。我正在使用“两遍”渲染来完成此操作，我在这里阅读了相关内容： https: //itnext.io/tips-for-server-side-rendering-with-react-e42b1b7acd57

我试图弄清楚为什么当 next.js 页面中的“ssrDone”状态发生变化时，整个<Layout>组件会不必要地重新渲染，其中包括页面的页眉、页脚等。

我已经阅读了有关React.memo()利用的内容shouldComponentUpdate()，但我似乎无法阻止它重新渲染组件<Layout>。

我的 console.log 消息触发<Layout>两次，但<ThirdPartyComponent>控制台消息按预期触发一次。这是一个问题吗，还是 React 足够聪明，不会实际更新 DOM，所以我什至不应该担心这个。无缘无故地让它重新渲染我的页眉和页脚似乎很愚蠢。

在控制台中，输出为：

Layout rendered
Layout rendered
3rd party component rendered

index.js（下一个.js 页面）

import React from "react";
import Layout from "../components/Layout";
import ThirdPartyComponent from "../components/ThirdPartyComponent";

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ssrDone: false
    };
  }

  componentDidMount() {
    this.setState({ ssrDone: true });
  }

  render() …

如何在服务器端的 Nuxt 中动态添加内容到头部？

我试图在这里重写这个模块，它只支持静态 ID： https: //github.com/nuxt-community/modules/blob/master/packages/google-tag-manager/index.js

（我的 ID 来自商店（商店正在从休息呼叫中获取 ID））

这是将内容添加到头部的函数：

export default function addheadcode(head, id) {
  const options = {
    id: id,
    layer: 'dataLayer',
    pageTracking: true,
    pageViewEventName: 'nuxtRoute',
    respectDoNotTrack: false,
    query: {},
    scriptURL: '//www.googletagmanager.com/gtm.js',
    noscriptURL: '//www.googletagmanager.com/ns.html',
    env: {} // env is supported for backward compability and is alias of query
  }

  const queryParams = Object.assign({}, options.env, options.query)

  queryParams.id = options.id

  if (options.layer) {
    queryParams.l = options.layer
  }

  const queryString = Object.keys(queryParams)
    .filter(key => queryParams[key] !== null && queryParams[key] …

我想制作部分 SSR Web 应用程序并寻找最佳解决方案。我需要用于 SEO 的 SSR，并且它只会提供动态渲染的产品页面 - 这将由 NextJS 处理。

应用程序的其他部分仅适用于登录用户，我不希望任何未登录的人意外显示它（但只有用户数据必须是安全的，如果有人通过黑客访问那些没有任何用户数据的受限页面，那也没关系）-对于这一部分，我已经实现了带有适当重定向和少量路由的 React Router（它也使用 Redux）。

整个项目是用 create-react-app 制作的。有没有办法轻松地将这两种功能结合起来？我必须将所有内容从 /src 移至 /pages 吗？也许最好的方法是独立为它们提供服务，然后使用 Apache 配置重定向到其中一个或另一个？

我终于开始涉足使用Next.js的服务器端 React 世界，但是我对这个问题感到非常困惑。

我正在使用以下方式调用pages/customer-preferences.tsxAPIisomorphic-unfetch

CustomerPreferencesPage.getInitialProps = async () => {
  const res = await fetch(API_URL + '/preference-customer');
  const initialData = await res.json();
  return { initialData };
};

一切都可以在本地模式下正常工作dev，或者一旦构建并运行build> start。为了托管它，我从 docker 容器运行它node:10，当我在本地运行它时，一切都很好。该问题仅在部署后才会发生。

当我导航到/然后单击链接时/customer-preferences，所有作品均按预期进行。但是，如果我刷新页面或直接加载页面，/customer-preferences我会从 Next.js 看到此错误

因此，该问题似乎仅在尝试从服务器而不是客户端进行 API 调用时才会发生。

我还设置了一个简单的快速服务器来代替使用，但不确定这是否有必要？！

const express = require('express');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ …

我正在开发一个通用应用程序，前端和后端分离，使用 Flask 作为 API，Nuxtjs 作为前端。在尝试 Nuxtjs 之前，我只使用 vuejs (SPA)，但后来我意识到它没有针对 SEO 进行优化。无论如何，我能够在使用构建模式（静态和index.html）时使用生成的dist 文件。我可以使用以下代码来处理它：

app = Flask(__name__, template_folder = "../frontend/dist")
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

@app.route('/static/js/<filename>')
def send_js(filename):
    filename = str(filename)
    return send_from_directory('../frontend/dist/static/js', filename)

@app.route('/static/css/<filename>')
def send_css(filename):
    filename = str(filename)
    return send_from_directory('../frontend/dist/static/css', filename)

@app.route('/static/fonts/<filename>')
def send_img(filename):
    filename = str(filename)
    return send_from_directory('../frontend/dist/static/fonts', filename)

@app.route('/static/img/<filename>')
def send_statics(filename):
    filename = str(filename)
    return send_from_directory('../frontend/dist/static/img', filename)

@app.route('/statics/icons/<filename>')
def send_icons(filename):
    filename = str(filename)
    return send_from_directory('../frontend/dist/static/statics/icons', filename)


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return render_template("index.html")

然而，当我开始使用Nuxtjs时，构建模式生成不同的文件（没有index.html，没有静态文件夹），我不知道如何处理它。您可以在下面的屏幕截图中找到它生成的内容： 生成的文件

我使用的 api 只允许使用id获取数据 ，但不允许 使用标题，如下所示http://0.0.0.0:5000/blog/13b03a39-bc04-4604-baf6-059658f9f5e8。端点返回一个 JSON 对象，我想使用 Next Js 将其渲染到浏览器。但是我想要一个干净的 url 架构，其中包含标题，如下所示：

而不是包含 id 的 url，如下所示：

这是我要传递的props方式Link：

<Link
    href={`/post/${post.blog_title}`}
    as={`/post/${post.blog_title}`}>
    
    <a className='blog__card--link'>
        <h4 className='blog__card--title'>{post.blog_title}</h4>
    </a>
</Link>

这是我的[id].js文件：

import { getBlog } from '../../api/index';

const Article = ({ blog }) => {
    const router = useRouter();

    return (
        <div class='article'>
            <div class='article__main'>
                {/* {console.log(router)} */}
                <ArticleView />
            </div>
        </div>
    );
};

Article.getInitialProps = async (router) => {
    const res …