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,
Related
We have a CMS where we are trying to provide the support of VueJS framework to our client websites. The views and their logic will be coded from the CMS Panel itself. The problem comes when trying to render the website having the support for both SPA and SSR due to SEO.
When client requests for a page, the SSR should work during that time but once the page is rendered, the SPA should take the control and let the user navigate(vue-router) wihtout page reload as it works in Vue SPA.
I checked on with this question and it won't help due to my unique requirement. There are no static bundles available for my case.
Any help will be appreciated!
I have tried many examples to achive this however they aren't exactly helping for my case.
https://github.com/0x00000001A/vuejs-spa-ssr-vuex
https://github.com/shenron/vue3-example-ssr
You may need nuxtjs. It can help you spa+ssr on vue
I dont know is this a right place to ask this question, so i planned to make a blog website with SPA (Single Page Application) model using vuejs, we all know SPA websites are not SEO friendly and we need SSR or Prerendering to overcome this problem.
From some source on the internet i found out that apllying SSR to a Website make it consume more server resource and i need to upgrade my hosting plan if needed and it will affect to my website operating cost.
can you guys give me advice what should i do?
from your experience did ssr cost server resources that much?
should i make my website without javascript framework and using fully dynamic php page?
I have seen many people using nextjs with expressjs and without expressjs framwork. Can someone please explain why do we need expressjs with nextjs? Nextjs works as SSR without expressjs. What does expressjs add to nextjs when we use it together? Assuming that we are using different rest api server.
You don't need to use expressjs if all you want is server-side rendering. But if you want to go beyond that by adding an API, as an example, then you need to be able to override the routing and that's when you'd add expressjs in front. Express will get the request and see if it is for the API or if it's just a normal nextjs page. LogRocket has a very good tutorial on this https://blog.logrocket.com/how-to-build-a-server-rendered-react-app-with-next-express-d5a389e7ab2f/
You most likely don't need to override Next's default server. For edge cases where you do, you'll see examples showing a custom server extending Next's default. You can use whatever server framework you want – Express, Hapi, etc.
https://nextjs.org/docs/advanced-features/custom-server
I came across vuexpress, vuepress and vue-server-renderer. To me these are looking somewhere similer which I guess are not. I am not frontend developer so not able to understand exact difference and use of these three modules.
Their official sites are saying
https://github.com/vuexpress/vuexpress
vuexpress: Vue + Express.js = VueXpress / A server side rendering
engine for Express.js. Use .vue files as your express.js templates.
https://vuepress.vuejs.org/
VuePress: Vue-powered Static Site Generator
https://ssr.vuejs.org/
vue-server-renderer: server-rendered Single-Page Applications using
Node.js as the server.
vuepress and vue-server-renderer are official library from Vue.js
So what exactly are differences and use of these three modules?
The idea with Vue (from the perspective of your question) is that you create a single-page application.
vuexpress is a rendering engine you can use in an Express application if you want to use the Vue syntax to implement your Express views, i.e. you implement a dynamic website and use the Vue syntax.
vuepress is about building a single-page application in Vue that also prerenders each page (and some other goodies, such as using markdown) to improve initial page load and facilitate for search engines. It is primarily used for websites with static content, such as documentation.
The point with a Vue application is to run it on the client (in the web browser). With vue-server-renderer you can run it on the server to obtain the HTML code the web browser would render if it would run in the web browser, and send it to the web browser, so the web browser doesn't need to run your Vue application, but receives the HTML it would display instead. Why? To improve initial page load and facilitate for search engines. I imagine vuepress makes use of vue-server-renderer under the hood.
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.