SSR not working In multiple routes

react
1

Hello friends .
As usual, I have a question about ssr.

I implemented ssr, but it only works on the Home Route ( / ).
This means that, in the Home Route , all elements are rendered correctly from the server side.
But when we go to another address like register ( /register ) , and its components are loaded from the client, I still see that the server has rendered the Home Route components in the div.

In other words, by looking at the view page source at both home ( / ) and register ( /register ) , I see a result in my main div (Home Components ).

Does SSR only work on Home Route and does this make sense?
Shouldn’t the server render the same components by changing the components and routes?

2

This is my Routes code :

   <Router>
                <Switch>
                    <Route path='/admin-panel/:path?' exact>
                        <PanelAdminLayout>
                            <Switch>
                                <Route path='/admin-panel' exact component={PanelAdminIndex} />
                                <Route path='/admin-panel/setting' component={PanelAdminSetting} />
                            </Switch>
                        </PanelAdminLayout>
                    </Route>
        
                    <Route path='/user-panel/:path?' exact>
                        <PanelUserLayout>
                            <Switch>
                                <Route path='/user-panel' exact component={PanelUserIndex} />
                            </Switch>
                        </PanelUserLayout>
                    </Route>
        
                    <Route>
                        <PagesLayout>
                            <Switch>
                                <Route path='/' exact component={PagesIndex} />
                                <Route path='/login' exact component={Login} />
                                <Route path='/register' exact component={Register} />
                            </Switch>
                        </PagesLayout>
                    </Route>
        
                </Switch>
            </Router>
3

And this My SSR Code in the Server :

onPageLoad(sink => {
  const helmetContext = {};
  const sheet = new ServerStyleSheet();
  const html = renderToString(sheet.collectStyles(
    <HelmetProvider context={helmetContext}>
      <Routes location={sink.request.url} />
    </HelmetProvider>
  ));
  const { helmet } = helmetContext;
  sink.renderIntoElementById("App", html);
  sink.appendToHead(helmet.meta.toString());
  sink.appendToHead(helmet.link.toString());
  sink.appendToHead(helmet.title.toString());
});
4

i’m Really struggling with this guys .
I Really need Help

5

Are you also using the community package?

Or did you implement it totally by yourself? I wrote an issue about such behavior a few days ago in the community package repo. Not sure if that package is still the default solution for SSR.

1 Like
6

@lucfranken
well i have the same issue But i didn’t use this Package (react-router-ssr) .
i just used the guiding of the meteor , in this link :
https://docs.meteor.com/packages/server-render.html

7

this is my Server Side :

import React from "react";
import { onPageLoad } from "meteor/server-render";
import { renderToString } from "react-dom/server";
import { ServerStyleSheet } from "styled-components"
import { HelmetProvider } from 'react-helmet-async';


import Routes from "../../Routes/Server-Routes";

onPageLoad(sink => {
  const helmetContext = {};
  const sheet = new ServerStyleSheet();
  const html = renderToString(sheet.collectStyles(
    <HelmetProvider context={helmetContext}>
      <Routes location={sink.request.url} />
    </HelmetProvider>
  ));
  const { helmet } = helmetContext;
  sink.renderIntoElementById("App", html);
  sink.appendToHead(helmet.meta.toString());
  sink.appendToHead(helmet.link.toString());
  sink.appendToHead(helmet.title.toString());
});

and this Client Side:

import React from 'react';
import ReactDOM from 'react-dom';
import { onPageLoad } from 'meteor/server-render';
import { HelmetProvider } from 'react-helmet-async';

onPageLoad(async sink => {
  const Routes = (await import('../../Routes/Client-Routes')).default;
  ReactDOM.hydrate(
    <HelmetProvider>
      <Routes />
    </HelmetProvider>
    ,
    document.getElementById('App')
  );
});

and this my Routes :


// Layouts
import PagesLayout from '../Ui/Pages/Layout/PagesLayout';
import PanelAdminLayout from '../Ui/PanelAdmin/Layout/PanelAdminLayout';
import PanelUserLayout from '../Ui/PanelUser/Layout/PanelUserLayout';

// Pages Components
import PagesIndex from '../Ui/Pages/Index/PagesIndex';
import Login from '../Ui/Pages/Login/Login'
import Register from '../Ui/Pages/Register/Register';

// Panel Admin Components
import PanelAdminIndex from '../Ui/PanelAdmin/Index/PanelAdminIndex';
import PanelAdminSetting from '../Ui/PanelAdmin/Setting/PanelAdminSetting'

// Panel User Components
import PanelUserIndex from '../Ui/PanelUser/Index/PanelUserIndex';




export default class ServerRoutes extends React.Component {
  
    render() { 
        return ( 
                <Router>

                    <Switch>
                        <Route path='/admin-panel/:path?' exact>
                            <PanelAdminLayout>
                                <Switch>
                                    <Route path='/admin-panel' exact component={PanelAdminIndex} />
                                    <Route path='/admin-panel/setting' component={PanelAdminSetting} />
                                </Switch>
                            </PanelAdminLayout>
                        </Route>
            
                        <Route path='/user-panel/:path?' exact>
                            <PanelUserLayout>
                                <Switch>
                                    <Route path='/user-panel' exact component={PanelUserIndex} />
                                </Switch>
                            </PanelUserLayout>
                        </Route>
            
                        <Route>
                            <PagesLayout>
                                <Switch>
                                    <Route path='/' exact component={PagesIndex} />
                                    <Route path='/login' exact component={Login} />
                                    <Route path='/register' exact component={Register} />
                                </Switch>
                            </PagesLayout>
                        </Route>
            
                    </Switch>
                </Router> 
         );
    }
}
8

my point here is i didn’t use (History) in neither of Server and Client.

Can it be the Problem ?