How to change pages without refresh like repl.it?
I have noticed on repl.it, that when you create or go to one of your repls, it changes the page, but doesn't involve refreshing or any browser loading. How do I do this?
(On a different issue, on one of my node js servers, it takes forever to load a certain page, and when it does load, it shows the page when the repl has been made, but isn't open to HTTP traffic(even though the repl is running). What is wrong with it, and how do I fix it?)
This uses the
History API, more specifically
fetch. If the user presses back or forwards, you will receive a
popState event, and are expected to load back the other content. The traditional way of doing this (as used in HackTalk) was with URI fragments: the "#..." bit at the end of some URIs. Changing the fragment will not reload the page.
First of all, write faster JS, and your server will run faster.
I've got an HTTP server over here, https://codepoint.xxperthacker.repl.co, and it goes pretty fast; but it's not a fair comparison, since I didn't use JS.
As for your bug, you probably forgot to send data back, can you link the Repl?
@xxpertHacker https://repl.it/@DREWNOLT/ReplCoin This is the page that goes super slow and glitches: https://replcoin.drewnolt.repl.co/home/?user=tlond
Also, could you give a code example for how to do what replit does with the pages?
We mostly used CSS, but usually people use JS.
The script responsible for swapping: https://hacktalk.epicgamer007.repl.co/scripts/profile.mjs
@DREWNOLT ReplCoin has a few issues, though first I'd recommend looking into
express.static and EJS. You're using
readFileSync a lot, often unnecessarily and without caching. Look into
fs.promises for file reads, and try to set up some kind of cache. Part of your issues are likely because you're using files to store data, which will be rolled back by Replit if you're not on the repl when the edits happen. Try to find a database to store this data instead.