Question

在我的react-redux-aspnetcore spa上，我启用了服务器端渲染。但是，我使用的是基于cookie的良好身份验证。所以我没有服务器端访问需要进行身份验证的API。

这是我的动作创建者：

export const actionCreators: AC = {
    requestEntries: (weekStartDate: string): ActionCreator => (dispatch, getState) => {
        // Only load data if it's something we don't already have (and are not already loading)
        if (getState().activeUserEntries.date != weekStartDate && getState().activeUserEntries.isLoading == false) {
            console.log('aa');

            let fetchTask = fetch(`/api/entries?date=${weekStartDate}`, {
                credentials: 'same-origin'
            })
                .then(response => response.json())
                .then((data: EntrySet) => {
                    dispatch(new ReceiveEntries(weekStartDate, data));
                }).catch((a)=>{
                    dispatch(new InitEntriesState());
                });

            addTask(fetchTask); // Ensure server-side prerendering waits for this to complete
            dispatch(new RequestEntries(weekStartDate));
        }
    }
};

正如您所看到的，fetch方法有.catch((a)=>{dispatch(new InitEntriesState());});部分。这会在服务器端捕获错误，因为身份验证失败并且response.json()抛出异常，因为视图结果不是json字符串。

因此，如果身份验证失败，我会调度InitEntriesState()，这会使我的reducer返回商店部分的初始状态。

最后，我收到了恶意警告信息：

Warning: React attempted to reuse markup in a container but the checksum was invalid. 
This generally means that you are using server rendering and the markup generated 
on the server was not what the client was expecting. 
React injected new markup to compensate which works but you have lost many of the 
benefits of server rendering. Instead, figure out why the markup being generated 
is different on the client or server:
    (client) v data-reactid="68">...Loading</div></di
    (server) v data-reactid="68"><table class="table

那我怎么解决这个问题呢？或者我应该改变我对问题的处理方法？如果是这样，怎么样？

Answer 1

如果我按照正确的方式提问，听起来服务器会呈现未经过身份验证的页面，然后在客户端加载时会呈现经过身份验证的页面。那是对的吗？您可以通过在浏览器中禁用js并查看服务器自己呈现的内容来对此进行测试。

这个神秘的错误消息只是意味着服务器和客户端没有呈现相同的HTML，这意味着服务器端呈现的大多数性能优势都会丢失。如果您真的无法让服务器端渲染工作，并且您的大多数应用程序在服务器渲染与客户端渲染上看起来完全不同，那么让服务器返回加载状态甚至不尝试渲染反应应用。该警告只会在开发者模式中显示，以警告您，它不会出现在生产中。

服务器端呈现“React试图在容器中重用标记，但校验和无效。”

1 个答案: