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.
Related
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 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.
Stumbled accross NextJS in npm and tried it out. Look pretty good and relatively easy to use. However, one thing about it is still not clear to me:
Suppose I want to have also have a NodeJS (or whatever) api server in complement with the server side rendering that NextJS offers. Do I need 2 server then? For example:
Also is NextJS just a rendering server (which can render React components and creates HTML) or something else/more?
You can definitely use the same server to implement your api.
On official documentation page about Custom server and routing there are examples of integrating with popular node frameworks like express or koa - so you can use them for regular purposes.
What about nextjs itself - like it's said on official documentation page:
Next.js is a minimalistic framework for server-rendered React
applications.
So it has not only capabilities of server side rendering, but also routing (including client one), css-in-js setup and so on.
I am new to meteor and react. I have been searching for the best practices for developing my voting-based project with meteor and react. One of the problems I tried to find on internet is pros and cons of using one of two options for router in meteor.
kadira:flow-router seems pretty straightforward to implement, but I see lots of projects on github implementing react-router instead.
Any idea about the comparison of both router packages for meteor ?
If you focus on Meteor with React, I recommend flow-router.
If not, choose react-router or redux-router(for redux).
I have to say, react-router use a lot of skills with react concept,
like writing router JSX component and use context to dispatch its url params. If you try to go deep, you will learn more about react itself. That will help you construct app beyond Meteor, and is why I recommend react-router.