I am starting a project where I decided to use Next.js. But my manager doesn't want the app to be in SSR, as it needs a Node server. He wants it to be only SPA.
Now I can use create-react-app and create the app with React, but I was thinking of taking advantage of the Next.js routing and other built-in configs.
As I've seen in Nuxt.js, there is a way of using 'universal' or 'spa' mode, I am searching if there is any way to make 'spa' in Next.js.
Yes it's possible. But that's not what it was built for and you're going to have a hard time keeping it a SPA. The Next routing and other built-in configs are specifically for SSR and creeping towards static site generation. create-react-app and things like React Router were built specifically for SPAs (though they're moving towards better SSR).
So if your boss wants a SPA, use the proper tool for it - today, that's CRA. You'll build it faster and meet the project requirements set forth by your boss. When the boss is ready for a SSR, consider Next. When the boss wants a static site built using React, consider Next or Gatsby.
Related
I'm a bit confused with single-page-applications and multi-page-applications. I already know the difference between both but I struggle a bit with creating a MPA... So far I only build some apps with React and Vue but they where all SPA (so they where client side rendered). I don't understand how I can build a multi-page-app with React or Vue that renders server side so that when I go to a different path (from /home to /contact for example) the page is rendered new?
Can someone help me or give me a link to a tutorial or something else because all tutorials or courses I've watched only focused on SPA.
You can implement a router to your Vue or React app for multi-page stuff. There are also many good routers available for both frameworks in the npm registry.
Or you can use a third-party framework (Next.js for React, Nuxt.js for Vue)
Next.js could be a good starting point for React. Its a framework on top of React and encourages SSR.
Is there a way to make ReactJs SEO friendly without using Next or Gatsby? Because I already made a project and it's difficult to dismantle it to use next or gatsby,
and I just got in trouble when I deployed the project, it's not very SEO friendly.
Thanks
Without using next or gatsby, it is a tedious task to make a pure react based application SEO friendly as it would involve a lot of time as you would have to create an isomorphic app Isomorphic apps with react, you can also look at this great article for better view Building search friendly Javascript applications with React.js
As stated in a previous answer, in order to make a React application SEO-friendly you would have to build an isomorphic application. Currently, the most popular frameworks for developing isomorphic applications are Gatsby and Next.js. This isn’t to say that creating an isomorphic application without them is impossible, but you’re looking at a lot more man-hours. That being said, if you're still struggling to make React SEO-friendly, take a look at this article to get a better understanding of How to Build Search-Friendly Pages in React.
In the last few years, I’ve been working with an old fashioned stack, but pretty effective for my use case. The stack was Node + Express.js + Angular.js 1.x.
Basically, the backend made the rendering of the view (via dot.js or Handlebars, any template engine) and then, in the Frontend side, the Angular app was mounted.
The use case needed to be SEO friendly, so the content must be generated at the backend and served directly. Also, the UI has its functionality, forms, etc. It’s not just dummy text.
Currently for a new project with the same use case, I want to update my stack (using SSR aka server side rendering) where the app does not need to be a SPA (single web app). The base stack is still the same (Node + Express.js) and the only thing I want to update is the frontend library / framework.
I am looking for a framework / library with a big community and an easy way to share component and codebase across project. That’s why my first thought was React.
The first thing I found was Next.js and while I was reading and investigating, it goes beyond what I need. It is a quite big framework that has too much stuff I don’t need and I do not want to add overhead to my application and I cannot customize it as I desire.
I continue researching and I found an express package called "express-react-views" that is a template engine for express but it does not allow to mount the React application at the client side.
Browsing through the Github issues of the package, I found many people asking for these and they all end up being answered that Next.js was the way to go.
My doubts / concerns are the following:
Is React the right tool / library for this use case?
In case of not being, what do you recommend?
Being the right one, is there any package / tool on top of React and Express that helps me out with SSR that allows me the customization I need?
I don’t want to rely again in old or antique tools like jQuery or Angular.js 1.x because the maintenance and code sharing across projects is complex and annoying.
The easiest solution, without going deeply into Next.js, is using the native React feature ReactDOMServer:
https://reactjs.org/docs/react-dom-server.html#reference
It's actually pretty easy to use, you just serve the HTML as a string and mount your React App Client Side if you want then to handle requests with React Router.
I plan on making a desktop only app. I don't have any intent to deploy it to a web server. Think something like VS code.
Im used to just "throwing" react at any problem that has the term "web application" in it. It streamlines so much its almost impossible to write really great apps without it in my opinion.
However, electron is a different beast entirely. Should I use react still, or is there more benefit to just sticking with raw electron in my case? I'm fairly new to development in electron, so I would like to do it right.
Electron is actually Chromium browser on the front end and nodejs on the backend. Building an electron app is technically building a webpage which ships its back end along with it.
If you have a dynamic application that needs to rerender frequently, ReactJS’s virtual DOM will be super effective
So, if you're used to 'throwing' react at any problem that has the term 'web application' in it, i would suggest you go with reactjs.
As we're building a Meteor React web application which will be presented inside a web view inside a react native application. As you can probably tell by reading that sentence, this doesn't make much sense, but due to time constraints and the fact that the react native application is made by another team, we have decided to present it in a web view for now, and eventually convert it to RN as well.
So to prevent having to write everything twice, is there a way to use React Native components in Meteor? (So use <View> for example instead of <div>).
If you want to go down this path, you can use react-native-web to build React Native components for the web.
Just want to warn that while building your web client with RN components will definitely help you transition, you will still pretty much have to scrap all your client side Meteor logic when you transition later. The best RN meteor client currently is react-native-meteor and is more of a proof of concept than anything -- trying to emulate key features of Meteor with a wrapper using a DDP client, but definitely not there yet.
So in the end, you're going to put in some serious hours making the conversion later or scrapping Meteor altogether when you go full native. If you're a fan of Meteor, I would suggest trying apollo made by the folks at Meteor and works out of the box with RN. You can still get all the best features of Meteor like reactive data, optimistic UI, subscriptions, etc. and the learning curve is pretty mild.