Understanding static and dynamic with vue.js - vue.js

I'm currently wondering about the difference between static and dynamic pages when using vue.js.
Are vue.js pages static or dynamic?
They can change on user interactions but not necessarily need to interact with the server to change data, when not using axios or alike. So does it still count as static just changing the frontend itself on input or interactions?
Little confused about this. Hope for good explanations.

A static page is a page delivered to the user exactly as stored and with no chance on being changed, end of story!
Although dynamic pages can take 2 types: Client-side dynamic web page and a Server-side dynamic web page.
Client-side dynamic page is changed without server requests. For example, when you click a button and something pops on the screen, or some content on the page changes, etc... (i think you take the idea).
Server-side dynamic page is changed with server requests, as you said for example, with HTTP requests using Axios.
And this is not the Vue.js definition, is the default definition for static and dynamic pages.

Related

Does Vuetify's data-table work with Static Site Generation?

Can I use an SSG tool for Vue.js, like Nuxt, to generate a single-page application using Vuetify and have its data-table component (instantiated with v-data-table) work, i.e. be able to display tabular data loaded as JSON (via a totally separate REST API, nowhere near Vue.js), enable editing its rows and having script handlers make REST calls in response to edit events which data-table provides? If so, what steps does that involve?
Or am I confused about the requirements, e.g. the meaning of static? (I understand it as content, i.e. HTML mostly, being ready on the server and send in response to requests, as opposed to generated on the fly. But maybe the in Vue.js it means something different.)

Share dynamic content on LinkedIn

I have a JS based CMS that populates a single page with different content based on URL parameters passed to the page. I am using the shareURL format (https://www.linkedin.com/shareArticle?mini=true&url=''&title=''&summary=''&source='')
But the parameters I pass are never used it always falls back to what is being served directly from the server.
Do I have to use the API to make this work and if so can I use the API without making the user authenticate?
Is there a correct way to pass this so that linked in will display the correct data.
After testing this more I realised that the linked ins share URL does not take its parameters it only takes what is served from the server. So I changed my build process not to get the pages in run time but to precompile them onto the server. Maybe in the future linked in will have resolved this for dynamic pages.

Can I have multiple SPAs in the same app or use history and hash routing in the same app?

I'm building an app and want multiple Vue instances in different pages of my website!
Is there a way to use History routing and "hash" routing within the same app so I can have URLs like this.
www.mysite.com/blog/seo-friendly-content
www.mysite.com/blog/google-can-see-this
www.mysite.com/#/something-cool/state-preserved
www.mysite.com/#/cool-but-not-indexed
One part of my application needs to serve SEO friendly content, and one section has a lot of dynamic content. I don't want to force the user to make another server request to load an entirely different page on the "SPA" part of the application!
I guess I could serve static HTML pages that I create manually, but I would like to if possible to use the Vue router to handle the routing!
I couldn't find anything in the Vue.js documentation about this. Anybody that has done something like this?
If you have multiple root Vue instances, then you cannot have a single router instance. At a fundamental level, your application needs route splitting at a server level. It means your client-server router cannot solve this problem alone.
What you essentially need is SSR.
With SSR, your first page (whichever the user visits first) will be pre-rendered by the server. Then anytime, a user navigates to another page, it won't be full page refresh. It will be handled by your client-side router.
It is the year 2018 and I strongly suggest that you use HTML5 routing and not hash based routing.
Also, consider using micro-frontends if your application is very big and has distinct role-based views.

How do I know the offset for each limit?

When I use LIMIT to make pages of results, how do we usually know the offset i.e. which page should be retrieved for each request?
Via cookies?
Via a query string parameter, traditionally. URLs typically include a ?page=3 to request page 3, like you'll see all over Stack Overflow: https://stackoverflow.com/questions?page=2&sort=newest
This is something you absolutely should not do through cookies. The URL should include everything necessary to navigate to the given page. Consider a user bookmarking page three of your results, or trying to link somebody else to the page they're looking at: Using cookies to store pagination data breaks these situations completely.
Usually via request parameters in action frameworks (RoR, ZF, Cake, Django) and via state of the session in component frameworks (Prado, JSF, ASP.NET). Session is usually associated with request by a cookie.
Using session to store current page is quite common in business-oriented applications, where state of the gui might be very complicated and the practically of being able to bookmark a page - limited.

scraping dynamic content

I am working on a web scraping project. do any body have idea of scraping dynamic content.
Dynamic content on base of query string is similar to static content but dynamic content based on some event of a control within same page is the point where i am stuck. because in this case page url remain same.
I am using C#.
Thanks in advance
Your question is rather general.
I'm not sure what you mean by event of a control, but as long as a browser generates http request you can catch it using tools like Firebug for Firefox or tools built in Google Chrome and see what is actually being sent to the server. So called AJAX requests are nothing else than standard http requests, it's just that web page is not reloaded as a whole.
Based on that information and page source it is possible to figure out how to create range of reguests that would simulate user interaction with dynamic elements on the page.