Hi Im new into the web developing world and wanted to know whats the difference between using the vue router and Express. Im developing a simple web application and wondered if express is really necessary.
The short version is:
Vue router: For single Page Apps (SPA) with client side rendered content
Express route: Not SPA, and content can be rendered in server side
When you are using Vue router, changing url path doesn't actually changing what page you are on, for example, you have / and /profile path, when you are navigating from / to /profile you are still in the same page, but Vue will render different Vue template depending on your Vue router configuration, which means the page on the browser isn't refreshed, only the URL path, and HTML DOM is changed. And all of this is being done in front-end javascript.
And when you are using express, it works like traditional Server side rendered page, where client / browser send a request to the server (express), server check what route it is, and send the HTML back to the client.
Of course this is not always the case, sometimes people use both Client Side rendering and Server side rendering depending on their needs.
This question is more like the difference between Client Side rendering, and Server Side rendering.
Related
I am building a website with node js currently and wanted to render the pages with handlebarjs. The website has a navbar, the links in the navbar are routes in my node application.
My problem is that the hole website with navbar get reload. Is there any way to prevent this.
If not would it be the best practise to split website and node in separate dictionaries and make request to the server and response the data in json?
I'm trying to figure out a basic thing about Nuxt "Universal" mode with the help of my dev tools, but I am just not sure if I understand it correctly.
Every time I request a new route in the Universal Nuxt app it seems to send a 200 (OK) request to the Node server. Did I understand correctly that on every page request a new document gets requested and served up by the Node server?
Some people are claiming that even while running the Universal mode the Node server sends only one package and after that the navigation and subsequent pages are loaded on the client side, thus not hitting the Node server anymore, but this is not the case right, how could the search engine crawler index that?
Essentially on every new route instead, the page gets re-requested from the Node server in its pre-rendered form right? This is how the "Universal" mode is actually SEO friendly as the crawler can look through all the pages and index it correctly to Google or Bing?
I'm sorry as I'm just a beginner with Nuxt and I fully understand (I think) how SPA as well as the Nuxt Generate modes work but this Universal mode is still a mystery for me at this point.
I would be very thankful for any clarifications on this!!! It would be super valuable in my learning journey! Thanks!
It's important to understand different "kinds" of navigation.
If you are navigating to a route by typing it into browser's URL bar, browser is hitting server (and this has nothing to do with Nuxt specifically) and what you get back is HTML with HTML content of your route pre-rendered by Nuxt + js bundle. Same thing happens if you use F5 (reload).
If on the other hand you use <nuxt-link> inside of some Nuxt page pointing to a different route/page and you click it, underlying Vue router will be used to switch to a different page (Vue component), server is not requested (for HTML) and new component (page) will handle rendering client side only
There can be an Ajax request when navigating that way but request is not for server-side rendered HTML. It's for additional JS content. Its because Nuxt is using automatic code-splitting (so when you hit the server 1st time, only JS needed for that route to work is loaded). Once the JS bundle for a specific route is loaded, it will not load again on subsequent navigation and unless your page/components inside are loading data from some API, you will not see any requests to a server during navigation....
I'm studying nuxt.
I leave a question because I have a question while studying.
nuxt can ssr, but ssr is known as server side rendering.
Then, I wonder where the server is.
Because vue is built on node, is the server automatically made into node server?
And, how is SEO possible if we make it with nuxt?
I understand that it is possible if you make html with MPA. However, using nuxt makes SEO possible.
So, when you create a project with nuxt, does the client make it an MPA when it makes the first request?
where the server is?
Depends... Nuxt include a node server (nuxt), but you can during the nuxt instalation merge them with other node server frameworks
when use nuxt alone or with other server-side framework?
Depends of your needs, knowledge and project.
For example I usually use nuxt alone, more apollo graphql it give me all I need. but for Shopify apps, the admin embed login is write for Koa and super easy to use so I prefers nuxt + koa when I develop this kind of app.
what means ssr?
server side rendering, the important thing is Rendering, that means nuxt (or nuxt + extra server-side framework) read the vue (js) code in the server and rendered them in Html code, after that it send the html to the client machine.
This is the reason why SEO is possible, when a web crawler visit the site it receive a fulfilled HTML page easy to read and clasify.
Nuxt has a really extensive and easy to understand guide, I recomend you follow them. Example you can use Head for edit the Header of the page,
I've deployed a React Redux site on hostgator.com. While it works to visit the page and navigate as usual. (React routing works), it shows 404 not found whenever I reload the page.
I talked to their support which, before leaving 20 sec into the conversation, came with the suggestion that it may have to do with the site trying to run on https, while no SSL is implemented.
I'm curious, why does it work locally and not on the world wide web? Any thoughts?
Thanks.
You need to look into a Server Side Rendering solution. A good framework for doing so with React is Next.js.
Basically as long as you don't refresh the page React-Router has control over the address bar as well as history via the History API. But when you hit refresh you send a request to the server for whatever is in the address bar. But the server is not handling your routing, React-Router is on the client side. You also won't be able to type a child route directly into the address bar without server side rendering.
I am doing a project using react, redux and express, I don't understand what is the difference between react-router and the express routes.js, did I need to combine the two or just use one ?
https://github.com/reactjs/react-router
Thanks for the help :)
Note: this stackoverflow post contains examples and codes that could help you a lot.
It's a classical misunderstanding. Express will handle your backend routes whereas React (with react-router or any front-end routing lib) will handle frontend routes.
Your React application will probably be an SPA (single page application), meaning that your server (express or something else) will have to serve the index.html and react will handle your application from here. Which mean that React will evaluate the routes and decide which view to render.
Therefore, you have to ensure that when a users goes on a route like /accounts/me, the servers serves your frontend (react) application if needed, but something like /api/users/me would render data. It's just an example.
A "normal" usage would be to handle your data (via an API) with express and the application (pages and views) only with React.
If you are using server-rendering, it becomes a bit more complicated.
In most cases, yes, you will have to use both.
Edit: it would be easier to answer if your question was more specific about your usage and what you want to do.
Edit 2: Most of the time, it's not the same servers serving the frontend application and the API (data), if it is, just ensure that the application is send when some routes hit the serve: i.e /home, /about (which are obviously -here- not api routes) should be send serve index.html as your frontend application, and React will take care of the routes to decide what to render.