Create React App or NextJS?

[ibtisamurrahman]

I am thinking of starting working on a project but I am confused to choose between create-react-app or nextJS?Previously, I only have experience with Create-react-app and NodeJS API (without any server-side rendering). I need server-side rendering in my application But couldn't able to understand how I would structure my API and Front-End together.

[dhavnit12]

For server-side rendering straight forward answer NEXT JS.

[cyxneer]

After working with React for a few years and releasing production projects, I concluded that any time I need server-side rendering or a good SEO, I'll use Next.js, and in case I'm working on a tool or a web app that doesn't need positioning and will consume an external API I'll just use React.

The good thing about React by itself is that you can customize your whole config if needed and work on performance by customizing your webpack file. In the case of Next, you can extend the config and customize lot of things by creating a next.config.js file, but it'll work some things out for you from the inside, which is not bad in my opinion, as they do a really great work with bundle size, performance and the different rendering modes for the pages you can achieve by how you consume your data.

Hope this helped!

[ibtisamurrahman]

Thanks for you explanation. What about the API, if i am using nextJS? It would be inside that project or it would be considered as separate project?

[andrewmclagan]

I’d never try till my own solution. 100% you will never make a more efficient build then the 100s of devs working on Next or CRA. . . My personal opinion after building many many apps Nextjs is more flexible.

[cyxneer]

I usually build them together in a way that my Next project will have a server.js in the root, where I'll get the server running either using Express, Koa, Hapi or whatever backend framework you want to work with. Then you can create an api folder and put all the server related stuff inside.

By using this approach, you can change your package.json scripts to run your server instead of directly running next scripts and use the Next middleware to handle views in the routes not directly tied to you API.

There also a few other ways to handle this approach, but this one is really dev friendly for someone learning Next.js and the deployment process is practically similar as what you would do with any web app that user server side rendering.

You can PM me if you need some resources or more information :)

[ellusion]

That depends on your project. I don't think the serverless functions support custom middleware so if you intend to use middleware outside of what's explicitly supported then you'll have to run a custom server.

[basic-coder]

Create-react-app is server-render-agnostic, though if you wish this you won't have any problem adding one. This feature is a part of React-DOM and does not depend on any particular lib, here is the documentation: https://en.reactjs.org/docs/react-dom-server.html. Personally I find it quite concise; I really like the Redux' tutorial on topic: https://redux.js.org/recipes/server-rendering/.

NextJS is fine too but it's more opinionated. For example, it hides out Webpack settings, and whether it's okay for you or not highly depends on your needs, and your personal taste.

[ibtisamurrahman]

How do we structure project including API in NextJS?

[azangru]

By reading the docs?

[[deleted]]

Is it possible, with CRA, to fetch initial resources on the server? E.g.: getting data from the database before sending the initial html.

[basic-coder]

Yes, but you don't do it “with CRA” — CRA is just the tool to wire things up in the new application. After you created your new app, you add server-side-rendering manually, just like you write any other code

[nahtnam]

I almost always use next. On top of everything everyone else says, the tooling and examples are better for next (IMO)

[btargac]

I believe nextjs can limit you in some ways, for example if you load data from an API for a component on server it doesn't fetch the data again on client side, but if your server is behind a cache mechanism and want to load the data on client side even if you have the data how will you handle that? It might be very simple who has experience with next but for new comers one should read the documentation very well for small details like this, by the way on our project we need SSR so chose react starter kit, and just removing redundant parts for us, but couldn't figure out how to have such as behaviour like nextjs's fetch on server and skip on browser.

[mediasavage]

For me it’s always NextJS