I'm developing a nuxt app with WordPress as headless CMS. The intention is to use mode static and to have all my pages be staticly generated. However, I suppose I'm a little bit unfamiliar with how SSG works in nuxt. There is a lot of data from WordPress (like the current title, description, menus, etc.) that needs to be available globally throughout my app. Hence the need for incorporating this in the vuex store. The state, simply put, needs to be populated with an API call to the WordPress server with the requested URL provided. Is this possible to generate on build time? Or will the state simply have to be generated on the client side?
Related
I'm building a Vue app that works as a SPA that gets rendered by my Express backend.
In this Vue app I'm using environment variables. One of these variables is an API key to an external API service.
Obviously I don't want to show the whole world my API key, however after I run the build command it includes all the env variables in the Javascript files, which I believe makes it accessible to anyone.
What would be the right way to go here? Should I make a route in my Express backend that handels requests to this external API, so that I can safely store my API key on the server side?
Or is there a way to make my Vue app autonomously send requests to the external API without having to show the API key?
I'm using Vue 2 by the way.
Yes you should make a backend that will interact with API using your key instead of the front end doing that no matter which version of VueJs your are using
VueJS is front end javascript, which mean users can see the code even minified on their browser
is what you are looking for
Your could use Nuxt, which is an SSR solution to build your app before shipping it to production. During the build, you can get use some sensible stuff since it will run NodeJS and will be on the server only. That way, you could for example fetch some variables and let's say get the content of some blog articles. Then, it will be available on the frontend with the end result only and all your variables safe since they will be used only on the server build.
Other solution is to use your backend as a middleware to do exactly the same process of using something sensitive and just fetch the end result.
Also, serverless functions like on Firebase or Azure are great + cheap for this purpose.
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,
We have Rails app with Webpacker that serves just the initial HTML file, after which the client will download everything (inc. vue .js and .css) files.
Our problem is that we want to display something initial on the html so the user will feel as the site already loaded. This logic is in the main vuejs component. Is there a way to offline render this so it will be easily be embedded on our index page? instead of having to maintain and re-write this everytime?
It sounds like pre-rendering might be a better fit for you than full-on SSR. Since you're already rolling Webpack, there is a plugin that helps to that end called prerender-spa-plugin: https://github.com/chrisvfritz/prerender-spa-plugin
The idea behind this plugin is that, as part of your build process, it prerenders the resulting static HTML of your SPA using Puppeteer (i.e. headless Chrome), and drops it into your static HTML folder. It maintains links to your SPA code so it's still fully functional, it's just fully rendered by the time the user hits it.
What I'd suspect you'd want to try is the following:
Add the prerender-spa-plugin to your webpack.config.js
Configure the plugin to prerender your initial route and any additional routes that are truly static
Output the resulting files to the folder your Rails app uses to distribute static assets (HTML, CSS, images, etc)
Going the pre-render route is actually technically superior to SSR for truly static routes like a landing page or marketing pages. You won't need to mess with a complex pre-render setup on your Rails server, you offload content distribution to the static folder (i.e. lesser load on your Rails server), and you still get to use all the benefits of your SPA.
That being said, if you strongly feel like you do need full-blown SSR, the generally "accepted" approach is rolling a Node.js server (https://ssr.vuejs.org/). If you decide to go down this route, I'd keep your SPA assets in their own separate Git repo from your Rails server and manage DevOps appropriately.
Good luck!
I have this reactjs webapp - http://52.26.51.120/
It loads a single page and then you can click links to dynamically load other boards on the same page... such as 52.26.51.120/#/b, 52.26.51.120/#/g
Now the thing is, I want each of these to be an individual page, for the purpose of seo. I want you to be able to google "my-site.com g", and you will see the result 52.26.51.120/#/g. This obviously cant work if you are using reactjs and it is all on one page. Google will only render and cache that main page (can it even render that page? does google execute javascript?)
Even more specifically, id want something like my-site.com/g/1234 to load a thread. There could be a thousand threads every day, so im not sure how to handle that.
Are there any solutions to this? to allow react to possibly serve up static pages as html so that they can be cached on google? I am using expressjs and webpack as my server right now, and all the code is executed in jsx files.
Thanks
You can use Prerender.io service. In a nutshell you will need to connect your server app or web server with prerender service and do little setup (see documentation). After that search engines and crawlers will be served with a static (prerendered) content while users will get classic React.js (or any other single page) app.
There is a hosted service with free tier or open source version
I suspect you could do some smart configuration with nginx and it could convert a url of domain/board to a redirection of domain/#/board when detecting the user-agent as a bot instead of a typical user.
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.