React-starter-kit: both SSR and client side react

Created on 20 Nov 2016 · 7Comments · Source: kriasoft/react-starter-kit

As I understand there is an option to use this kit to build an app that may be rendered on server side or as regular react components ( for example use SSR for search bots and CSR for regular users).
But there is no examples or explanations how to do it, can someone add this examples please ? tnx.

CSR worked for me when I did it like it's done here: https://github.com/kriasoft/react-starter-kit/pull/833/files

Source

fatal10110

Most helpful comment

The main idea of react-starter-kit is providing the base for Isomorphic JavaScript Web Application.

This means that each component here is to be rendered on both the server-side (for crawlers, SEO, etc) and the client-side (for browser, visitors), it works out of the box and you do not need to configure anything extra, just add your own components.

If you don't need SSR (Server-Side Rendering), you probably don't need any starter kit because it is easy to start from scratch, or you can look at react-static-boilerplate or any others.

frenzzy on 20 Nov 2016

👍2

All 7 comments

sauravskumar on 20 Nov 2016

IDrinkMoreWater on 20 Nov 2016

The main idea of react-starter-kit is providing the base for Isomorphic JavaScript Web Application.

If you don't need SSR (Server-Side Rendering), you probably don't need any starter kit because it is easy to start from scratch, or you can look at react-static-boilerplate or any others.

frenzzy on 20 Nov 2016

👍2

@frenzzy ok, you just repeated the readme, but by default you are using SSR, how to switch it to CSR on some cases? I need the SSR but only for crawlers.

as I understand i can take the js file (the bundle) from build directory and use it for CSR by requiring it using script tag, but then I need to provide some initial state(some docs?), something like that:

<!doctype html>
<html class="no-js">
<body>
    <div id="app"></div>
    <script>
        window.APP_STATE = {
            "user": null,
            "runtime": {
                "initialNow": 1479674949659,
                "availableLocales": ["en-US", "cs-CZ"]
            },
            "intl": {
                "initialNow": 1479674949659
            }
        }
    </script>
    <script src="/assets/client.js?7bf71af8f91c4dad3aad"></script>
</body>

</html>

I'm planning to use it with another framework (Django python) and move only crawler requests to nodejs for SSR, so i'm planning to render the bundle(for csr) using in django templates but ssr using node.

Another thing, is there any chance that graphql will be moved out from the main branch? It's little bit confusing when the code should be evaluated only on SSR or on both sides (like models , db queries) for example from what I understand this code is evaluated only on SSR https://github.com/kriasoft/react-starter-kit/blob/feature/react-intl/src/actions/intl.js#L19
so in case that i'm removing the graphQL I just need to load here the messages file instead of doing any requests, because for CSR it's loaded here https://github.com/kriasoft/react-starter-kit/blob/feature/react-intl/src/clientLoader.js#L25 , am i right?

This is only my opinion :)

fatal10110 on 20 Nov 2016

👍1

I know this is old but I ran into similar issues.

It looks like you are on the right track with using window.APP_STATE as configureStore will use that as the Redux store. Before I realized this I had my (custom) client entry point dispatch a few actions like below (which is not a good way to go about it):

store.dispatch(setRuntimeVariable({
  name: 'initialNow',
  value: Date.now(),
}));

store.dispatch({
  type: SET_LOCALE_SUCCESS,
  payload: {
    locale: 'en-US',
  }
});

I also posted a quick ex about loading the locales without GraphQL in another issue:
https://github.com/kriasoft/react-starter-kit/issues/911

I am working my way through all of this code trying to find the best way to just make a simple client side app without graphQL. I know there are other react starter kits that are better choices for this but I was handed a repository based off this one and have a short deadline.

bbarrows on 17 May 2017

Hi there

@fatal10110, sorry, may be too late, but:
You really don't want disable SSR. You can write your API in different framework or language, but you really don't want wasting time with redirecting request forth and back through different app. There are exceptions like slowly migrating one app from legacy dev stack to new one but I cannot imagine how hard will be maintaining this craziness.

@bbarrows Intl fetching is still a little special, but is all done in Redux. And this is good path.
You can render app on server thanks to redux. This is most isomorphic and simple way you can do this.
Of course, you can load your dictionaries by different way, you can (now) switch to Apollo and you got caching for free, but payload will be same.

store.dispatch(setRuntimeVariable({...}) is only example, nothing more.

store.dispatch({ type: SET_LOCALE_SUCCESS, ...}) is practical use case how to dispatch action on server. Same action is dispatched on client.

And do you know how expensive are both dispatches? It cost almost nothing! So enjoy them as a way how to preload data :smiley:

langpavel on 24 May 2017

For my current task for my job I was stuck with a pre existing code base
and asked to make an Electron app. Doing server side rendering in an
Electron app sounded and looked like a horrible idea to me personally but
maybe it's not so bad?

I was just trying to provide some rough example alternatives if someone
gets stuck in a situation like mine. This starter kit is not what I would
want to use for an Electron app personally, I would have started with
something more minimal.

I will look into Apollo though. Sounds really interesting, thank you!

On Tue, May 23, 2017 at 6:39 PM Pavel Lang notifications@github.com wrote:

Hi there

@fatal10110 https://github.com/fatal10110, sorry, may be too late, but:
You really don't want disable SSR. You can write your API in different
framework or language, but you really don't want wasting time with
redirecting request forth and back through different app. There are
exceptions like slowly migrating one app from legacy dev stack to new one
but I cannot imagine how hard will be maintaining this craziness.

@bbarrows https://github.com/bbarrows Intl fetching is still a little
special, but is all done in Redux. And this is good path.
You can render app on server thanks to redux. This is most isomorphic and
simple way you can do this.
Of course, you can load your dictionaries by different way, you can (now)
switch to Apollo and you got caching for free, but payload will be same.

store.dispatch(setRuntimeVariable({...}) is only example, nothing more.

store.dispatch({ type: SET_LOCALE_SUCCESS, ...}) is practical use case
how to dispatch action on server. Same action is dispatched on client.

And do you know how expensive are both dispatches? It cost almost nothing!
So enjoy them as a way how to preload data 😃

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/kriasoft/react-starter-kit/issues/984#issuecomment-303593847,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAaWfZOJyeq14BuB3ypUzIQsMQxLt4PPks5r84pbgaJpZM4K3fji
.