I'm using Express framework on NodeJS (hosted by Heroku) to create my web site. I'm also using the React framework to create my components.
I have several HTML files with divs inside and React components which can be rendered in those divs.
When a user chooses a route (e.g. /movies) I want to be able to associate one HTML file with a component and return it back to the user. I already looked for a solution, but all of them talk about server-side rendering and sending back HTML files.
Is there another solution?
Check out react router you don't have to use server side rendering, you just need to give a react component that you want to return when a route is requested.
The standard way to do this now is to build a Single-Page applications and redirect all requests to /, and the front end routing will handle the required page to load.
Related
I'm working on a coloring demo. I have an SVG file, but I decided to use svgr to convert it to a React component. This will allow me to easily edit its colors and handle onClicks for every individual cell for the user to color in. I want to have all of these components inside a server and send it through express when I fetch for it. However, I'm not sure how to send React code through Express. I looked into server side rendering, but all of the tutorials I have found render to a static index.html. I just simply want to send a component over for me to render. Could someone help me on this? I could elaborate more if needed.
You could try to use some kind of Lazy loading of the JS on frontend side. You can read more on:
https://www.newline.co/fullstack-react/articles/Declaratively_loading_JS_libraries/ or
React lazy loading - when to use
I have a node.js /Express server set up that serves my Single page application (in Vue.js) inside the public folder from the root url path(localhost:3333).
Now, inside my index.html from my SPA, I can navigate easily inside my app to other pages (those are all handled by the vue.js History API, (not the hash one)).
However, if I enter directly some route inside my browser, which should point to some subpage in my SPA (e.g localhost:3333/about.html), that route is trying to be served from my node.js program which of course does not recognize that route...
How can I let handle this route by my SPA directly, and not through my node.js program? I found some sort of solution, by redirecting everything not root url to let it serve the index.html page in my dist SPA folder:
app.all('/*', function(req, res) {
res.sendfile('index.html', {root: publicDir});
});
First, I do not really understand how this can be handled by my SPA... I know that I serve my index.html page but it kind of redirects itself to the /about subpage by my Vue app automatically or how does it work?
And secondly, is that the recommended / or even standard way how to pass that route handling to your SPA and not by node.js? Or is there another better way?
Like you already said in your explanation, you have a SPA and the routing is being handled by Vue in the frontend. Retuning your index.html for every route and letting Vue do its thing in the frontend is the way to go.
And secondly, is that the recommended / or even standard way how to pass that route handling to your SPA and not by node.js? Or is there another better way?
The other options would be to have a server site app, meaning building the page on everything request. What Next.js does in React.
Or to have static pages, like what Gatsby does in React.
I have a very little knowledge about SSR.
Currently, I have two servers. I have built a CSR Single Page App using React on one server and backend on Nodejs + express on another server. My app has a login page.
How can I move my existing Login component logic to SSR and after successfull login all other components must work from CSR. I don't know how to achieve this goal.
Do I need to turn my CSR react app server into SSR by using something like Nextjs and the backend nodejs server should continue to operate like before?
Or do I need to use SSR logic on my backend Nodejs server?
Or do I need to migrate my whole CSR react app into SSR? Then do i still need backend nodejs server?
I might sound confusing asking this question. Please let me know if i need to explain it a bit further.
You will use just one NodeJS + Express server. You define some regular endpoint routes to provide things like login functionality, signup and so on. But also a "catch-all" route at the end where you will render your react app to a string via node and send it back to the browser as HTML.
Not too long ago I did a very basic SSR example using typescript and react. I hope this will be helpful!
https://github.com/akimthedream/server-side-rendered-typescript-react
I cannot fully understand how a single page application can do routing by itself.
Maybe you can see the example here.
If you click on those links (below the visited, purple color link), the url and the page will be change without reloading. But how to achieve this if the front-end is deployed in a MVC framework?
Isn't that if you visit a url on MVC, it'll will look for the corresponding controller for that url? If that happen, of course the page will be reloaded isn't it? If it using HTML5 History, how can when I revisit the url, the page display the changed state?
Can someone explain how to achieve this with React app that deployed on a MVC framework like Rails? Thank you
I'm more familiar with Angular, but all the Single Page Applications (SPA) are based on the the same model. You have three layers:
the Rails MVC routing system with its routes and controllers
the React SPA routing system (that also has its own
routes and controller system)
the React event handling system that, as a javascript framework, among other things, catches mouse clicks in the web application
In your reactrails example page, the root of your web site (/) is handled by Rails, and every other pages (/*) are intercepted and handled by the react routing system.
So basically, if you have a rails ApplicationController you could have a config/routes.rb like this:
# routes.rb
root 'application#main'
# catch every routes and serve only the Application.main action
match '*path', to: 'application#main'
# application_controller.rb
class ApplicationController
def main
end
end
This will redirect every urls coming to Rails (/this/is/an/example, /that/one/is/not/an/example...) to the React router. (Note that you could also have other routes such as /api/gimme/my/damn/json/data that will resolve to other controllers and send back JSON, xml, html or any kind of data)
Then, in your html page, React intercepts every clicks, on links or buttons, and compare them to its own routes.
If a route match, it will display the correct page via its templating system, (usually loading it by Ajax or read it from its cache), and you won't see any page reload. You could say that react act has a client-side server.
If you call a url such as /i/like/flowers, the route will be first processed by rails (/*), that will send you an html file located at the / route, containing your SPA app, that will kicks in, analyse the route itself, and show you the correct content from its own templating system.
So to sum up, you have:
GET /my/super/react/url
//=> Rails serves `main.html` that includes `react-router`
Once main.html is loaded, react-router looks at its routes components and serve the right template if route exists (/my/super/react/url).
You could find more examples in the react-router documentation
This is the basic scenario, and I'm sure others will complete anything I didn't cover, and add react specific samples!
I would like to create an app in koa that would render react components when user hits the address bar, and after that a react-router client side to navigate through the links inside that rendered react component. is that possible? I want the initial load to be SEO friendly. i cant provide code yet but eager to listen to all of you suggestions and answers.
This will be the wanted flow:
User hits ther server (ex: localhost:3123/) --> KOA will render the react component that will be shown (this component has react router links on it) --> User navigate through the links (this time i dont want to hit the server again, so i want the react router on this side to trigger the routing.
It doesnt matter if the source code when routing through client side will not change, all i want to have is the source code of the initial react component when the user first hits the server. is this possible?
I have not done any serverside rendering, since I have developed mobile apps most of the time, which has the assets available on clientside.
Maybe look at this Demo to get your head around this:
https://github.com/rackt/react-router-mega-demo