So I have my nuxt 2 app where I want to fetch company reviews from an API on a single page. The API does not allow requests from the browser/client so I need to use a server for this call.
So I was using asyncData() with if (process.server) but now I have the issue that the data is only being fetched on the initial page load of the specific page. So if I switch routes in my app to the page where the review data is loaded, I am getting an error, since the review data can only be loaded server side.
I think I have a little comprehension issue here on how to solve this issue. Is there a best practice on how I should fetch my review data in order to access it on this specific page even if this page was not loaded initially?
I am using static site generation for my nuxt app.
If you can have all of the data set at build time (full static mode), you could get it without any extra step.
Here, I guess that this is dynamic and you need more flexibility. So, there is no magic sauce here: you cannot have a server-side call made on each client-side navigation (like SSR Next.js does). Nuxt will stay isomorphic and be client-side only after the initial render (done on the server).
You could have a serverMiddleware into your Nuxt2 app but it's pretty tricky overall and not really worth the effort IMO: https://stackoverflow.com/a/72102209/8816585
(quite easier with Nuxt3)
Solution: use an external server middleware (could be an edge/serverless function) to fetch the private data and send it back to Nuxt.
Related
I am trying to figure out how to pass data between the theme-app-extension and the backend of the application that the theme-app-extension is connected to. The theme-app-extension is all liquid, css, and javascript so I wasn't sure if there was a built in way to pass data between the two. For example is there a suggested method to pull data into the theme-app-extension from the database and is there a suggested way to send data to the database from the code running the theme-app-extension? I am fairly new to doing anything with theme-app-extensions as well as building Shopify applications. I have built Shopify applications that was admin facing or just cosmetic, this is my first time building a Shopify application that takes user input and sends it to the database and retrieves that data for the end-user to see.
Any suggestions would be greatly appreciated.
Thank You.
I started working on Shopify App (Theme App Extension) a week ago
I run into the same problem, so I did consume API in a javascript file using Fetch
Here is an example of the code:
I add this into global.js file inside assets
And then I linked the script files inside my Liquid block
Also inside global.js, I did manipulate DOM by injecting data consumed from API, here is an example
Finally what I did is communicate directly with DOM to inject or retrieve data, then handle it using javascript
I hope this helps you
Ps:
This is my first experience with Shopify too, and I was quite disappointed (lack of resources, docs, and community)
You usually (always) pass data from the front-end to the back-end using an App Proxy. There really is no other way at this time. The Proxy gives you an XHR call you can use, and you can return Liquid or JSON. Your choice.
I am trying to wrap my head around difference of SSR vs CSR when using a framework like Vue. Wouldn't it always be CSR since you'd use Vue Router or a similar mechanism to navigate?
When I think of SSR, I think of something like Rails where the server loads up a different route and has an ERB file it loads up to show. Are there are any examples of how you would set up SSR and vue?
Vue is primarily client side framework - rendering is done by JS running in the client's browser. Your app has (usually) only one index.html. That html file contains almost NO html. It only loads tons of JS...
This brings (at least) 2 challenges:
Crawlers (Google, but also Twitter/FB etc. for sharing) do not execute JS (or if they do, there is a big "wait in queue" penalty before your site is indexed) so they do not see any content. This is problem...
When the page being loaded is non-trivial (using lots of components/components rendering huge amount of HTML/components which needs some additional data from API), the initial render can still take a considerable amount of time. This is bad user experience - page loads, user sees nothing and after some time, content appears...
To solve this problems, SSR is introduced. 1st page request is pre-rendered on the server so the client (be it crawler or user) receives something meaningful to index/see and after that, Vue takes the control and everything else happens only on the client again...
I am currently working on an asset manager for network/server infrastructure in vue.js.
I am also using vuetify for the look and feel since the goal is to create a progressive web app. Engineers can use their phone to scan tags on company assets to request details.
Currently all data is loaded into the app using a rest api. I am using vuex for state management in the application.
I would like some insights in to when to launch these api requests.
So there is some data i currently load at the start of the web app just after logging in when the main core view is loaded. This is impacting performance. Some examples of loaded data:
-> asset types,vendors,suppliers,...
This data is used in a lot of places in the application. (forms,filters,...)
I prefer not to call the vuex actions to perform the api request form inside a specific component since this could lead to unnecessary request when browsing the app.
The only exception to this being the assets them self since this is a lot of data to load at the start.
The problem i am facing is that on mobile platforms loading the data each time at the start of the app is a waste of data connection. It is possible that the engineer is using the app without actually needing the data.
I know this is kind of an abstract question, i am not looking for the one final awnser. Just some insight or recommendations from the community.
Correct me if I misunderstood but it sounds like you are prefetching a lot of non critical information all at start up. You should really focus on when that data is actually needed and reach out and retrieve it only when its actually needed. A common case of this is on route change, so if you have multiple pages within your app an admin page is likely going to need data that your home screen doesn't need. Wait until you navigate to that page before you retrieve information specific to that page. This is commonly done within the beforeRouteEnter router hook or created life cycle hook. Now to build on this, it may take some time to download that new data after a route change - the page could render before all of its necessary data has been made available. You can use a library like Vue-Promised to handle that intermediate state for sections that require data that is still loading. This allows you to let the page render quickly without having to wait on all of its data.
A couple other tips to further optimize things:
If you data that doesn't change often, sometimes it doesn't hurt to persist that data within the browser, either using the Cache-Control http header when making your http calls or by using something like the browsers LocalStorage or one of the hard persistence methods available within the browser. Theres a number of Vuex plugins that make this really easy, ex. vuex-persist. On startup you can load this data from storage which is faster than making a network call, your app will be able to respond faster and you can even go and make that network request in the background to refresh that data after the page has rendered.
If retrieving large sets of data is an issue then you can page the data to retrieve it in smaller chunks and only retrieve additional "pages" fo data when the user needs it. In tables this is commonly done using pagination buttons or infinite scrolling. Theres a number of libraries that do both of these as well, pagination would likely be built into the vuetify libraries table component.
i'm using React & Node JS for building universal apps (). I'm also using react-helmet as library to handle page title, meta, description, etc.
But i have some trouble when loading content dynamically using ajax, google crawler cannot fetch my site correctly because content will be loaded dynamically. Any suggestion to tackle this problem?
Thank you!
I had similar situation but with backend as django, but I think which backend you use doesnt matter.
First of let me get to the basics, the google bots dont actually wait for your ajax calls to get completed. If you want to test it out register your page at google webmaster tools and try fetch as google, you will see how your page is seen by bots(mine was just empty page with loading icon), so since calls dont complete, not data and page is empty, which is bad for SEO ,as bots read text.
So what you need to do, is try server side rendering. This you can do in 2 ways either you prerender.io or create templates on backend which are loaded when the page is called for the first time, after which your single page app kicks in.
If you use prerender its paid but pre-render internally uses phantom.js which you are you can directly use. But it did not work out really well for me so I went with creating templates on the backend. So the bots or the user when come to page for first time(or first entry) the page is served from backend else front end.
Feel free to ask in case in any questions :)
I have made an angular app with rails as a backend.I have read lots of blog and articles about how to make an angulajs app crawlable.
for example - : "http://www.example.com/#!/home" Google bots will convert this url into "http://www.example.com/?_escape_fragment_=/home".
I have written logic that wherever request comes with "?_escape_fragement_=" format ,I just returns the json data in html file.
for example-:
<p>name: test</p>
<p>designation :test1</p>
so i just want to know that this much is enough for making an ajax application crawlable.if not then please suggest me the other ways to make an application crawlable.
Thanks,
You should consider creating HTML snapshots from your existing codebase rather than adding further complexity for creating pages. Google (see option 3) recommends using a headless browser to prerender your AJAX application before returning to the client.
You can also see some significant performance improvements by prerendering for all users and initialising your Angular app in its current state - especially in hybrid apps/mobile websites - this reduces XHR requests and painting in the browser. More on this here;
https://github.com/ithkuil/angular-on-server/wiki/Running-AngularJS-on-the-server-with-Node.js-and-jsdom