When I turn on webpack5 and call internal api(/api/*) from page after first render, the page refreshes and logs Refreshing page data due to server-side change. after refreshing once, it works fine as webpack4.
Expected Behavior
The page should not refresh on api call after first render.
I recently updated to Next JS 12 and suddenly started encountering this issue also. I'm not sure if it's necessarily related to that as I believe Next JS 11 was also using Webpack 5 for HMR, but they certainly switched over to socket communication for hot reloading, rather than server sent events as they had with previous versions. [https://nextjs.org/docs/upgrading#nextjs-hmr-connection-now-uses-a-websocket]
I have a file /inc/paths.js where I am organizing and exporting URI path string variables for different resources in my app. There were a number of paths in that module which were also being utilized by parts of my /api scripts, namely object keys for AWS S3 bucket paths. So, this module was being imported by not only React components in the /pages directory and elsewhere, but also to the modules in the /api directory. By moving all the variables used by the /api modules into their own file and making sure that none of those variables are imported by React components or pages, the error seems to have disappeared for me.
This may be related to this quote from Vercel:
Finally, if you edit a file that's imported by files outside of the
React tree, Fast Refresh will fall back to doing a full reload. You
might have a file which renders a React component but also exports a
value that is imported by a non-React component. For example, maybe
your component also exports a constant, and a non-React utility file
imports it. In that case, consider migrating the constant to a
separate file and importing it into both files. This will re-enable
Fast Refresh to work. Other cases can usually be solved in a similar
way.
https://nextjs.org/docs/basic-features/fast-refresh
Although the logic doesn't quite match up, it leads me to believe there is something occurring along those lines.
I updated next.js due to the console warning I get whenever next.js run, telling me its using using weppack 4 instead of 5
You can still use webpack 4 by changing it from your next config as it's an update issue
On the client page, I changed to call the internal API by useEffect() hook to fetch data, instead of triggering the data-fetch function by onclick. I found the issue was gone.
Related
I have some pages that could benefit from being statically generated by implementing getStaticProps. The problem is, inside getStaticProps I need to call some api and access resources aren't available when I want to do the build (that is when building the docker container in which next.js will run).
Is there a way to tell next.js that I want to postpone the build of some pages untill they are requested for the first time? I feel like it should be possible, the revalidate option for getStaticProps almost does what I want (it re-generates the page the first time it's called if the previously generated one is older that X), problem is, it still tries to generate the page on next build.
There's also the fallback option for getStaticPaths that almost works for me because it allows to postpone the generation of a dynamic-route page. Problem is, I need it for static-route pages too.
I have a nice html, css template (source code here).
I am going to use this template in my angular2 app (source code here).
I got the html template out of this repository (index.html).
My problem is in the angular2 source code
You need to clone the angular source.
Run npm install
Run ng serve
Unfortunatly, it seems that the <script src="assets/js/main.js"></script> in index.html is not added properly. Although, there is no error in the console, the left menu is broken. I know that this problem occurs when main.js is not fit.
Here is the correct html page:
Here is the angular page (broken header and menu):
The codes are identical, but I have decomposed the html template into 3 components (header, menu, and app (main content)).
Instead of trying to figure out what happened with your CSS, I took the original template, converted it to Angular 2 with the angular-cli, and fixed the CSS issues. It all works now, and the complete source is at https://github.com/Boyan-Kostadinov/angular2-miminium
When you broke apart index.html it's likely that you also altered some file paths.
The relative path would go from src="assets/js/main.js" to something like src="../assets/js/main.js".
Prepending ../ to the path will back out of the current directory to the next level up. As you have it now, the browser is looking for the assets directory in what I assume you have compartmentalized as an htmlComponents directory.
Consider using the absolute path to main.js, at least to diagnose the issue.
I ran into a similar issue with the same file. In my case, I have a complicated application that is developed in stages. I installed my Angular seed in a subdirectory. Because of my file structure, when I run npm start, the live server that is started has bad relative link locations. For example, in the screen shot below, you will see that the application is trying to find style.css at http://localhost:3000/medface/RecordWriter/styles.css; however, it should be looking at http://localhost:3000/styles.css, because the root of the web server that was created by npm start is at /medface/RecordWriter/.
With respect to your project. The key to finding the problem with your link is to open the developer panel and inspect the actual network request. If you share a screen shot, we may be able to help you inspect your instance with more insight.
What Worked for Me
In my case, I reconfigured my local web server to handle any unserved pages in the Angular2 folder and return the index instead. When I run npm start, I close the browser page that opens and use my regular web server. Instead of viewing my application on localhost:3000, I view my application at localhost/medface/RecordWriter/ (which is equivalent to localhost:80/medface/RecordWriter).
The down side to my makeshift approach is that the page must be refreshed before changes appear, but it loads all resources predictably and reliably, and allows my Angular2 code to run in conjunction with some of the older code base in other areas of the website that have not been converted to Angular2. Regardless, this may work for you also.
currently the project i am working on is using cache:1.1.1 plugin with grails 2.2.4. but for some reason its not working and in browser under the network tab i get status 200 instead of 304 every time i reload the page.
I have tried different plugin versions but in vain.
i don't want any special functions to be cached. I just need my assets, so that the loading time speeds up.
compile ":cache:1.1.1",
I have read about the ehcache somewhere but don't know whether it'll work or not.
The cache plugin doesn't have anything to do with assets - for that you should look at the asset-pipeline plugin and its addon plugins.
The cache plugin caches method call results (typically service methods) and GSP page fragments, and should be used when the method will return the same result given the same inputs (or the GSP section will generate the same output) and is time-consuming or resource-intensive to compute, so caching those values and not recomputing the values every time can save a lot of server load. It doesn't do anything by default; you need to add annotations to methods that should be cached, and wrap the sections of GSPs that should be cached in a taglib call. See the documentation for more info.
I'm starting a large scale app and need advise on setting up the folder structure and all. So I'm not sure if on Meteor startup if it loads all of the components to one file or not ( if all the components are in the client/ folder )
If it does not load all the components and send it to the client initially the this question has been answered. if Meteor do send all the components to the browser then need a way to fix it.
At the moment I have like 70 components and do not wanna send all of this to the user on the initial page load.
It seems as though incremental/on-demand loading for components is in the 'todo'/'future feature' stage.
From - Trello: Meteor Roadmap
Right now, on initial pageload, you download all of the JavaScript,
templates, and css in the app.
This task is to make it so that you download just the parts that you
need. You might download additional parts in the background, or
on-demand as you navigate through the app. (To be clear, this would
apply to the JavaScript, CSS, and templates, not to database contents,
which would continue to be handled by the subscription system.)
It should be possible to secure some of the additional parts so that
only certain users can download them. For example, only admin users
could download the JavaScript and templates for the admin console.
Related: when the app is updated, only download the changed parts, not
the whole app.
I do not really understand how Google Code handles file versioning.
I am building a jQuery plugin that anyone can access. Like so:
<script type="text/javascript" src="http://jquery-old-browser-warning.googlecode.com/files/jquery.browser-warning.js"></script>
This script accesses other files on the same project (via ajax).
The problem is, that when I upload a new file, it just seems like there aren't any changed to it. Google recommends that new files should have new names.
But then I would have to change the filenames that the script loads.
But then I would have to change the script file as well, and that would break everybodys implementation (with the script-tag above)
Is there a way to force a file to change when uploading with the same filename?
PS: If I go directly to the project page's file list. Then I do get the file with the updated content. But as I said, not when getting it through ajax.
The cheapest trick in the book to prevent caching is adding some random content to a GET parameter:
www.example.com/resources/resource.js?random=1234567
You can for example use the current timestamp for this.
This, however, causes any and every access to re-fetch the content, and invalidates any client-side caching mechanism as well. I would use this only as a last resort. If Google are that stringent about caching, I'd rather develop a workflow that allows for easy renaming of files.
I don't know your workflow, but maybe you can work with versioned directories?
Like so:
www.example.com/50/resources/resource.js
www.example.com/51/resources/resource.js
that would keep whatever caching the client employs intact, but whenever there's a change from your end, the browser would reload the content.
I think Its just a cache on the browsers, So when you request file from ajax, just add random parameters or version number.
For example, Stackoverflow add version parameter to static contents like
http://sstatic.net/so/all.css?v=6638
Are you talking about uploading files to the "Downloads" area? Those should have distinct filenames, for example they should be versioned. If you're uploading the script code, that should be submitted by the version control system you're using, and should most definitely keep the same name across revisions.
Edit: your code snippet didn't show up on my page, misunderstood what you're trying. Don't imagine Google would be happy with you referencing the SVN repository every time some client page is loaded :)